啦啦！今天又学了一招，js写几十行的tab标签页jquery写一行就行啦，用到了链式操作！以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
#ul{
height: 30px;
margin-bottom: 10px;
}
#ul li {
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid gray;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current {
background: #abcdef;
}
#content div{
width: 300px;
height: 200px;
border: 1px solid red;
border-collapse: collapse;
display: none;
}
#content div.php{
display: block;
}
</style>
<script src = ‘js.js‘></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li class = ‘current‘>php</li>
<li>ruby</li>
<li>python</li>
</ul>
<div id="content">
<div class = "php">php。。。。。。介绍</div>
<div class = "ruby">ruby。。。。。。介绍</div>
<div class = "python">python。。。。。。介绍</div>
</div>
<script>
$(‘li‘).click(function(){
//$(this).css(‘background‘,‘#abcdef‘);
//$(this).siblings().css(‘background‘,‘white‘);
$(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().children().eq($(this).index()).show().siblings().hide(); //添加class
//var m = $(this).html();
//$(‘.‘+m).css(‘display‘,‘block‘).siblings().css(‘display‘,‘none‘);//class选择法
//$(‘#content div‘).eq($(this).index()).addClass(‘php‘).siblings().removeClass(‘php‘);//索引选择法
//$(‘#content div‘).eq($(this).index()).show().siblings().hide();
})
</script>
</body>
</html>
注释掉的部分还有一种方法来实现关联li和div的变化，“一行”的方法中用的是用li的索引的方法，我自己想出来的是用class选择器的方法，先将li中的文字选择出来，然后直接用来class选择，前提是你的div得有class名。
还有一种方法就是用内容选择器：
$(‘#content div contains(m)‘).......这种方法用于标签和html（）内容相关联更佳灵活，代码里没有写出来，大家可以自己试一下哦！
时间： 2024-10-11 12:00:18