如何一行jquery代码写出tab标签页(链式操作)

   啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: ;
margin: ;
}
ul{
list-style-type: none;
}
#ul{
height: 30px;
margin-bottom: 10px;
}
#ul li {
height: 30px;
line-height: 30px;
padding: 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()内容相关联更佳灵活,代码里没有写出来,大家可以自己试一下哦!

上一篇:php连接数据库查询方法(还少一种pdo方法)


下一篇:深入刨析tomcat 之---第13篇 tomcat的三种部署方法