jQuery和原生js 实现tab栏切换

最新推荐文章于 2023-08-14 12:30:37 发布

嘿，小苹果

最新推荐文章于 2023-08-14 12:30:37 发布

阅读量159

点赞数

分类专栏： html jquery javascript 文章标签： jquery html css

本文链接：https://blog.csdn.net/AAAXiaoApple/article/details/120745332

版权

javascript 同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

jquery

14 篇文章 1 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

jQuery实现tab栏切换

<!DOCTYPE html>
<html lang="en">
    <head lang="en">
    <meta charset="utf-8">
    <title>jQuery实现tab栏切换效果</title>
      <style>
      * {
        list-style: none;
        margin: 0px;
        padding: 0px;
      }
      nav{
          width: 800px;
          height: 50px;
          background: #ddffab;
          margin: 100px auto 50px;
          padding-left: 100px;
      }
      ul li{
          width: 100px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 25px;
          float: left;
          font-size: 24px;
          color: #470a47;
          background-color: #acdeff;
          margin-right: 100px;
          cursor: pointer;
      }

      .tabbg{
        background-color: #df9323;
      }
    
     .content{
          width: 550px;
          height: 390px;
          border: 5px dashed  #abdeff;
          margin: 0 auto;
      }
      .content div{
          display: none;
          width: 550px;
          height: 390px;
          border: 5px dashed  #abdeff;
          margin: 0 auto;
      }
      .content .div_show{
          display: block;
      }
      </style>

  </head>

     <script type="text/javascript" src="./jquery-1.9.0.min.js"></script> 

    <body>
        <nav>
            <ul>
                <li>加菲猫</li>
                <li>柯基犬</li>
                <li>垂耳兔</li>
                <li>荷兰猪</li>
            </ul>
        </nav>

        <div class="content">
            <div>11加菲猫11</div>
            <div>22柯基犬22 </div>
            <div>33垂耳兔33 </div>
            <div>44荷兰猪44</div>
        </div>

        <script>

          // tab 栏切换默认第一个
          $('ul li').eq(0).addClass('tabbg');
        
          $('.content div').eq(0).css('display','block');

          $('ul li').each(function(){ 

            var i = $(this).index();
            $(this).click(function(event) {
            
              $('ul li').removeClass('tabbg');
              $(this).addClass('tabbg');

              $('.content div').hide();
              $('.content div').eq(i).show();
              
            })

          })
        </script>
    </body>
</html>

<!--  -->

javascript 原生实现 tab栏切换

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>tab栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style-type: none;
    }
    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }
    .hd {
      height: 45px;
    }
    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }
    .hd span.current {
      background-color: yellowgreen;
    }
    .bd li {
      height: 255px;
      background-color: yellowgreen;
      display: none;
    }
    .bd li.current {
      display: block;
      font-size: 36px;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </div>
  <div class="bd">
    <ul>
      <li class="current">我是体育模块</li>
      <li>我是娱乐模块</li>
      <li>我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </div>
</div>
<script src="./jquery-1.9.0.min.js"></script>
<script>

  var box = document.getElementById("box");  // tab栏的父
  var spans = box.getElementsByTagName("span"); // tab 栏的子元素
  var lis = box.getElementsByTagName("li");  // 需要显示的模块 所有li 
  for (var i = 0; i < spans.length; i++) {   // 循环 tab的子元素 

    spans[i].aaa = i;                        // 相对应的下标

    spans[i].onclick = function () {         // 点击相对应的下标
      for (var i = 0; i < spans.length; i++) {  // tab的子元素 循环
        spans[i].className = "";                // 下标对应的去掉类名
        lis[i].className = "";                  // 下标对应的li 去掉类名，默认是none
      }
      this.className = "current";               // 
      lis[this.aaa].className = "current";
    }
  }

</script>
</body>
</html>

嘿，小苹果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery和原生js 实现tab栏切换

jQuery实现tab栏切换<!DOCTYPE html><html lang="en"> <head lang="en"> <meta charset="utf-8"> <title>jQuery实现tab栏切换效果</title> <style> * { list-style: none; margin: 0px; pad
复制链接

扫一扫