小编给大家分享一下如何使用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 auto; } .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" >内容1</div> <div class="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实现切换页面效果”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
