具体代码如下:
<style> *{ margin: 0; padding: 0; } .d1{ margin: 100px auto; width: 638px; } .d2{ height: 39px; border: 1px solid #ccc; background-color: #CCCCCC; } .d2 li{ float:left; height: 39px; padding: 0 30px; line-height: 39px; text-align: center; cursor: pointer; } .current{ background-color: #f3313b; color: black; } li{ list-style-type: none; } .item{ display: none; } </style> <div class="d1"> <div class="d2"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价</li> <li>手机社区</li> </ul> </div>` <div class="d3"> <div class="item" style="display: block">商品介绍模块</div> <div class="item">规格与包装模块</div> <div class="item">售后保障模块</div> <div class="item">商品评价模块</div> <div class="item">手机社区模块</div> </div> </div> <script> var lis=document.querySelector('.d2').querySelectorAll('li'); var item=document.querySelectorAll('.item') for(var i=0;i<lis.length;i++){ lis[i].setAttribute('index',i); lis[i].onclick=function (){ for(var i=0;i<lis.length;i++){ lis[i].className=''; } this.className='current'; var index =this.getAttribute('index'); for(var i=0;i<item.length;i++){ item[i].style.display='none'; } item[index].style.display='block'; } } </script> </body> </html>
结果图如下:
下面讲一下js代码的具体实现过程,首先来实现上面的导航栏的切换功能,先要获取点击事件的事件源,刚开始先给导航栏的第一个部分显示为点击状态,建立一个class类名,给导航栏添加点击事件,内容比较多,所以用for循环来实现,每当点击一个导航,将该导航的样式设置为选中的样式,这样设置后你会发现一个问题,虽然点击的部分已经显示为选中状态,但是点击过的部分也显示为选中状态,所以要在每次修改之前把所有的部分都设置为未选中状态(排他思想),这样就可以实现了。
接着说在导航栏选中时怎样把相应的内容显示出来,这时候我们要给导航栏的每一个标签设置一个自定义属性,从而实现导航栏与内容的相互对应,类似的这也需要要排他思想。
以上就是这个效果的简单介绍,具体代码如上,欢迎指正学习!