如何使用JavaScript/jQuery实现切换页面效果
导读：本文共1716字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge&quo... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。具体内容如下
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="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:100pxauto;}.tab_list{height:39px;border:1pxsolid#ccc;background-color:#f1f1f1;}.tab_listli{float:left;height:39px;line-height:39px;padding:020px;text-align:center;cursor:pointer;}.tab_list.current{background-color:#c81623;color:#fff;}.item_info{padding:20px0020px;}.item{display:none;}</style></head><body><divclass="tab"><!--标题--><divclass="tab_list"><ul><liclass="current">标题1</li><li>标题2</li><li>标题3</li><li>标题4</li><li>标题5</li></ul></div><!--内容--><divclass="tab_con"><divclass="item">内容1</div><divclass="item">内容2</div><divclass="item">内容3</div><divclass="item">内容4</div><divclass="item">内容5</div></div></div><script>//获取元素,获取所有的小livartab_list=document.querySelector('.tab_list');varlis=tab_list.querySelectorAll('li');varitems=document.querySelectorAll('.item');//排他思想，遍历标题for(vari=0;i<lis.length;i++){//给每一个小li自定义属性，indexlis[i].setAttribute('index',i);//注册事件lis[i].onclick=function(){//先清除所有样式for(vari=0;i<lis.length;i++){lis[i].className='';}//点击时，加class样式this.className='current';varindex=this.getAttribute('index');for(vari=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_listli").click(function(){//链式编程操作（点击加入类，其余的清除类样式）$(this).addClass("current").siblings().removeClass("current");//2.点击的同时，得到当前li的索引号varindex=$(this).index();console.log(index);//3.让下部里面相应索引号的item显示，其余的item隐藏$(".tab_con.item").eq(index).show().siblings().hide();});})</script>结果：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
如何使用JavaScript/jQuery实现切换页面效果的详细内容，希望对您有所帮助，信息来源于网络。