点击索尼显示1....,点击谷歌显示2....,点击腾讯显示3....

img

tab功能吧。如有帮助请采纳,谢谢~

img

    .tab a{display:inline-block;background:blue;color:#fff;padding:5px}
    .tab a.cur{background:#f00}
    .tabs>div{display:none}
    .tabs>div.cur{display:block}
</style>
<div class="tab">
    <a href="#">索尼</a>
    <a href="#">谷歌</a>
    <a href="#">腾讯</a>
</div>
<div class="tabs">
    <div>索尼tab内容</div>
    <div>谷歌tab内容</div>
    <div>腾讯tab内容</div>
</div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var tabs = $('.tabs>div');
    $('.tab a').click(function () {
        tabs.removeClass('cur').eq($(this).index()).addClass('cur');
        $(this).addClass('cur').siblings().removeClass('cur');
        return false;
    }).eq(0).trigger('click');//默认显示第一个tab,要显示其他的修改0为其他数字,下标从0开始,第二个修改为1

</script>

运行结果

img
代码如下:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <span>索尼</span>
        <span>谷歌</span>
        <span>腾讯</span>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function() {
            $("span").click(function() {
                if($(this).text() == '索尼') {
                    $("body").append("1");
                } else if($(this).text() == '谷歌') {
                    $("body").append("2");
                } else {

                    $("body").append("3");
                }
            })
        });
    </script>

</html>