Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JQuery制作tab选项卡
Blogger Information
Blog 18
fans 0
comment 0
visits 13921
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JQuery制作tab选项卡
八七乱乱
Original
1020 people have browsed it

寒假在家做作业，在练习仿PHP中文网的时候，其中有一个tab选项卡的问题，花了点时间，把它做出来了，现在做个笔记。

先看页面结构代码

 <div class="tab-news ">
                <ul class="tab">
                    <li class="on"><a href="">技术文章</a></li>
                    <li><a href="">网站源码</a></li>
                    <li><a href="">原生手册</a></li>
                    <li><a href="">推荐博文</a></li>
                </ul>
                <ul class="tab-list">
                    <li>11111111111111111</li>
                    <li>22222222222222222</li>
                    <li>33333333333333333</li>
                    <li>4444444444444444</li>
                </ul>
 </div>

CSS样式规则

  .tab-news .tab {
   display: flex;
   margin: 0 -10px 10px -10px;
   line-height: 29px;
   border-bottom: 1px solid #e9e9e9;
}

.tab-news .tab li:nth-child(1) {
   margin-left: 1em;
}

tab-news .tab li {
   margin-right: 1em;
   padding-bottom: 5px;
}

.tab-news .tab .on a {
   position: relative;
   top: -1px;
}
 .tab-news .tab .on {
   position: relative;
   top: 1px;
   border-bottom: 1px solid red;
}

  .tab-news .tab-list {
   position: relative;
}

.tab-news .tab-list li {
   width: 100%;
   line-height: 30px;
   position: absolute;
   display: none;
}
 .tab-news .tab-list li:nth-child(1) {
   display: block;
}
 .tab-news .tab-list li a:nth-child(1) {
   text-transform: uppercase;
   color: #aaa;
   display: inline-block;
   line-height: 12px;
   padding-right: 0.5em;
   border-right: 1px solid #aaa;
}
 .tab-news .tab-list li a:nth-child(2) {
   padding-left: 1em;
}
.tab-news .tab-list li span {
   float: right;
   color: red;

}

最后是JS代码

<script>
   $(function () {
           $('.tab li').hover(function () {
           $(this).addClass('on').siblings('li').removeClass('on');
             var index = $(this).index();
            var aa = $(this).parent().siblings().children();
            $(this).parent().siblings().children().eq(index).show().siblings().hide();
        }, function () {
       })
    })
</script>

为了方便测试，我把代码发出来。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿站PHP中文网</title>
      <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
  .tab-news .tab {
    display: flex;
    margin: 0 -10px 10px -10px;
    line-height: 29px;
    border-bottom: 1px solid #e9e9e9;
}

.tab-news .tab li:nth-child(1) {
    margin-left: 1em;
}

tab-news .tab li {
    margin-right: 1em;
    padding-bottom: 5px;
}

.tab-news .tab .on a {
    position: relative;
    top: -1px;
}
 .tab-news .tab .on {
    position: relative;
    top: 1px;
    border-bottom: 1px solid red;
}
  .tab-news .tab-list {
    position: relative;
}

.tab-news .tab-list li {
    width: 100%;
    line-height: 30px;
   position: absolute;
    display: none;
}
 .tab-news .tab-list li:nth-child(1) {
    display: block;
}
 .tab-news .tab-list li a:nth-child(1) {
    text-transform: uppercase;
    color: #aaa;
    display: inline-block;
    line-height: 12px;
    padding-right: 0.5em;
    border-right: 1px solid #aaa;
}
 .tab-news .tab-list li a:nth-child(2) {
    padding-left: 1em;
}
.tab-news .tab-list li span {
    float: right;
    color: red;
}
</style>
</head>
<body>
            <div class="tab-news bg-white radius">
                <ul class="tab">
                    <li class="on"><a href="">技术文章</a></li>
                    <li><a href="">网站源码</a></li>
                    <li><a href="">原生手册</a></li>
                    <li><a href="">推荐博文</a></li>
                </ul>
                <ul class="tab-list">
                    <li>11111111111111111</li>
                    <li>22222222222222222</li>
                    <li>33333333333333333</li>
                    <li>44444444444444444</li>
                </ul>
                <script>
                    $(function () {
                        $('.uimg').hover(function () {
                            $('.userbox').slideDown(500);
                        }, function () {
                        });
                        $('.userbox').hover(function () {
                            $('.userbox').slideDown(500);
                        }, function () {
                            $('.userbox').slideUp(500);
                        });
                        $('.tab li').hover(function () {
                            $(this).addClass('on').siblings('li').removeClass('on');
                            /*给鼠标划过的li添加.on样式，显示红色下划线，同时要匹配同级li，清除掉同级li标签中的.on样式*/
                            var index = $(this).index();
                            /*获取当前每个li的序列号*/
                            // console.log(index);
                            var aa = $(this).parent().siblings().children();
                            // console.log(aa);
                            /*
                                 遍历当前元素的祖先的同级的所有子元素。
                                 $(this)：当前元素，.tab li
                                 .parent()：遍历祖先
                                 .siblings()：遍历同级
                                 .children()：遍历子元素
                             */
                            $(this).parent().siblings().children().eq(index).show().siblings().hide();
                            /*
                             * 让当前.tab li的序号与 .tab-list 中的li的序号相对应，让其显示，同级的li让其隐藏
                             *
                             */
                        }, function () {
                        })

                    })
                </script>
            </div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post