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

Posted 2020-08-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何一行jquery代码写出tab标签页（链式操作）相关的知识，希望对你有一定的参考价值。

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

以上是关于如何一行jquery代码写出tab标签页（链式操作）的主要内容，如果未能解决你的问题，请参考以下文章

JS-jQuery-EasyUI-Layout-Tabs：Tabs 标签页/选项卡

jQuery链式操作如何实现以及为啥要用链式操作