tab功能吧。如有帮助请采纳,谢谢~
.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>
运行结果
代码如下:
<!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>