标签：ddc tom remove 如何 border pointer addclass 部分 是你
啦啦！今天又学了一招，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（）内容相关联更佳灵活，代码里没有写出来，大家可以自己试一下哦！
标签：ddc tom remove 如何 border pointer addclass 部分 是你
原文地址：http://www.cnblogs.com/ly0613/p/6062146.html
