JavaScript/jQuery实现切换页面效果

2022-04-17 18:33:13 来源：易采站长站作者：

本文实例为大家分享了javascript/jquery实现切换页面效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"> <head>  <meta charset="UTF-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>切换页面</title>  <style>   * {    margin: 0;    padding: 0;   }   li {    list-style-type: none;   }   .tab {    width: 978px;    margin: 100px autLRCRMIATAo;   }   .tab_list {    height: 39px;    border: 1px solid #ccc;    background-color: #f1f1f1;   }   .tab_list li {    float: left;    height: 39px;    line-height: 39px;    padding: 0 20px;    text-align: center;    cursor: pointer;   }   .tab_list .current {    background-color: #c81623;    color: #fff;   }   .item_info {    padding: 20px 0 0 20px;   }   .item {    display: none;   }  </style> </head> <body>  <div class="tab">   <!-- 标题 -->   <div class="tab_list">    <ul>     <li class="current">标题1</li>     <li>标题2</li>     <li>标题3</li>     <li>标题4</li>     <li>标题5</li>    </ul>   </div>   <!-- 内容 -->   <div class="tab_con">    <div class="item" style="display: block">内容1</div>    <div claswww.easck.coms="item">内容2</div>    <div class="item">内容3</div>    <div class="item">内容4</div>    <div class="item">内容5</div>   </div>  </div>  <script>   //获取元素,获取所有的小li   var tab_list = document.querySelector('.tab_list');   var lis = tab_list.querySelectorAll('li');   var items = document.querySelectorAll('.item');   //排他思想，遍历标题   for (var i = 0; i < lis.length; i++) {    //给每一个小li自定义属性，index    lis[i].setAttribute('index', i);    //注册事件    lis[i].onclick = function () {     //先清除所有样式     for (var i = 0; i < lis.length; i++) {      lis[i].className = '';     }     //点击时，加class样式     this.className = 'current';     var index = this.getAttribute('index');     for (var i = 0; i < items.length; i++) {      items[i].style.display = 'none';     }     items[index].style.display = 'block';    };   }  </script> </body></html>

结果：

jQuery思路：

<script>    $(function() {      // 1.点击上部的li，当前li 添加current类，其余兄弟移除类      $(".tab_list li").click(function() {        // 链式编程操作（点击加入类，其余的清除类样式）        $(this).addClass("current").siblings().removeClass("current");        // 2.点击的同时，得到当前li 的索引号        var index = $(this).index();        console.log(index);        // 3.让下部里面相应索引号的item显示，其余的item隐藏        $(".tab_con .item").eq(index).show().siblings().hide();      });    })</script>

结果：

JavaScript/jQuery实现切换页面效果