首页 > 代码库 > 如何一行jquery代码写出tab标签页（链式操作）

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

2024-08-20 21:13:36   220人阅读

　　　啦啦！今天又学了一招，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 = http://www.mamicode.com/‘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（）内容相关联更佳灵活，代码里没有写出来，大家可以自己试一下哦！

 

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


联系
我们