js,jq 实现选项卡问题！

最新推荐文章于 2023-02-25 12:03:34 发布

香妹儿

最新推荐文章于 2023-02-25 12:03:34 发布

阅读量267

点赞数

分类专栏：前端生涯文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_43553184/article/details/106328840

版权

前端生涯专栏收录该内容

11 篇文章 0 订阅

订阅专栏

正式进军前，我遇到的第一个问题便是js实现选项卡的问题，刚开始没有连接流程的时候可以说别人说什么都是听不进去的，像我这种人就适合自己一个人安静的研究或者思考问题，不知道大家是不是有一样的感受，所以还是要自己多敲代码，学习才行，下面我就对选项卡的实现做了一个总结，希望有用！

效果图：

具体实现的代码：

代码部分：

一、原生js实现：

<!DOCTYPE html>
<html>

   <head lang="en">
       <meta charset="UTF-8">
       <title> 选项卡</title>
       <style type="text/css">
           /* CSS样式 */
           * {
               padding: 0px;
               margin: 0px;
           }

           a {
       /*文字修饰:可选择值:none,underline,overline*/
               text-decoration: none;
               color: black;
           }
           /*鼠标移动到a标签上的样式*/
           a:hover {
               text-decoration: none;
               color: red;
           }

           #tab {
               width: 270px;
               padding: 5px;
               height: 150px;
               margin: 20px;
           }

           #tab ul {
               list-style: none;/*列表样式*/
               display: ;
               height: 30px;
               line-height: 30px; /*行距*/
               border-bottom: 2px #C88 solid;
           }

           #tab ul li {
               background: #FFF;
               cursor: pointer; /*显示的光标形状*/
               float: left; /*元素向左浮动*/
               list-style: none height:29px;
               line-height: 29px;
               padding: 0px 10px;
               margin: 0px 10px;
               border: 1px solid #BBB;
               border-bottom: 2px solid #C88;
           }

           #tab ul li.on {
               border-top: 2px solid gray;
               border-bottom: 2px solid #FFF;
           }

           #tab div {
               height: 100px;
               width: 250px;
               line-height: 24px;
               border-top: none;
               padding: 1px;
               border: 1px solid #336699;
               padding: 10px;
           }

           .hide {
               display: none;
           }
       </style>

for(var i = 0; i < myLi.length; i++) {
                   myLi[i].index = i;
                   myLi[i].onclick = function() {
                       for(var j = 0; j < myLi.length; j++) {
                           myLi[j].className = "off";
                           myDiv[j].className = "hide";
                       }
                       this.className = "on";
                       myDiv[this.index].className = "show";
                   }
               }
           }
       </script>
   </head>
   <body>
       
       <div id="tab">
           <ul>
               <li class="off">测试一</li>
               <li class="on">测试二</li>
               <li class="off">测试三</li>
           </ul>

           <div id="firstPage" class="hide">
               <a href="#">测试一内容</a><br/>
           </div>
           <div id="secondPage" class="show">
               <a href="#">测试二内容</a><br/>
           </div>
           <div id="thirdPage" class="hide">
               <a href="#">测试三内容</a><br/>
           </div>
       </div>
   </body>
</html>

二、jq实现选项卡

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta name="description" content="">
       <meta name="author" content="">
       <title>jp实现选项卡</title>
       <link href="css/bootstrap.css" rel="stylesheet">
       <style type="text/css">
           * {
               padding: 0;
               margin: 0;
           }

           .content {
               padding: 100px;
           }

           .ct-ul {
               list-style: none;
               display: flex;
               margin-bottom: 0;
           }

           .ct-ul li {
               padding: 5px 10px;
               margin-right: -1px;
               border: solid 1px #ccc;
               border-bottom: none;
               cursor: pointer;
           }

           .ct-list {
               border: solid 1px #ccc;
               margin-top: -1px;
               min-height: 100px;
           }

           .one {
               background-color: #fff;
           }
       </style>
       <script src="js/jquery-2.1.4.min.js"></script>
       <script>
           $(function() {
               $(".item:gt(0)").hide(); //选择item类0之后的元素隐藏,为0的这个元素显示

               //主要逻辑就在于找到选项卡和内容框相对应的下标
           //jq中 unbind()：移除被选元素的事件处理程序；
               $(".ct-li").unbind('click').click(function() {
                   var _index = $(this).index(); //获取点击元素的下标
                   $(this).addClass("one") //给点击的元素添加类
                       .siblings().removeClass(); //同胞元素隐藏类
                   $(".item").eq(_index).show()
                       .siblings().hide(); //选择item元素中第_index个显示出来，相邻元素被隐藏
               })
           })
       </script>

</head>

   <body>
       <div class="content">
           <ul class="ct-ul">
               <li class="ct-li one">选项一</li>
               <li class="ct-li">选项二</li>
               <li class="ct-li">选项三</li>
               <li class="ct-li">选项四</li>
           </ul>
           <div class="ct-list">
               <div class="item">选项一内容</div>
               <div class="item">选项二内容</div>
               <div class="item">选项三内容</div>
               <div class="item">选项四内容</div>
           </div>

</div>
</body>

</html>

香妹儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js,jq 实现选项卡问题！

正式进军前，我遇到的第一个问题便是js实现选项卡的问题，刚开始没有连接流程的时候可以说别人说什么都是听不进去的，像我这种人就适合自己一个人安静的研究或者思考问题，不知道大家是不是有一样的感受，所以还是要自己多敲代码，学习才行，下面我就对选项卡的实现做了一个总结，希望有用！具体实现的代码：代码部分：一、原生js实现：<!DOCTYPE html><html> <head lang="en"> <meta charse...
复制链接

扫一扫