需求:
(1)初始时,显示第一个Tab
(2)点击Tab标题,显示该Tab内容,且Tab标题为活动状态
(3)Tab标题活动状态的css已写好:active
实现类似这样的导航效果
html实现
<div id="tab"> <div class="tab_menu"> <ul> <li id="menu-1">电影</li> <li id="menu-2">电视剧</li> <li id="menu-3">综艺</li> <li id="menu-4">小说</li> </ul> </div> <div class="tab_box"> <div>1 这个是电影 </div> <div>2 这个是电视剧 </div> <div>3 这个是综艺 </div> <div>4 这个是小说 </div> </div> </div>css代码
<style type="text/css"> /*css实现思路*/ /*首先为这个栏目设置宽度,然后让ul下的li左浮动,li.width=menu.width/(li.width-内外边距);*/ /*其次为这个盒子的内容设置和栏目同样的宽度*/ /*要在盒子里清除浮动,不然盒子的内容也会跑上去*/ .tab_menu ul{ width: 320px; } .tab_menu ul li{ /*每个li60,4个240,所以下面的盒子内容宽度设置为240*/ width:60px; float: left; background-color: #00A5FF; display: block; /*这个边框让导航中间有线*/ border-left: 1px solid #ebebeb;jQuery代码:/*//让鼠标成手型*/ cursor: pointer;} .tab_box{ clear: both; width: 240px; border: double 3px darkgray; background-color: #ffffff; margin-left: 38px; }</style>
<script type="text/javascript"> $(document).ready(function(){ // :nth-child(1)这个函数表示她的孩子,她的索引值一般从1开始 $('.tab_box div:nth-child(1)').show();//默认打开浏览器让第一个div显示 $('.tab_box div:nth-child(2)').hide(); $('.tab_box div:nth-child(3)').hide(); $('.tab_box div:nth-child(4)').hide(); //接下来实现点击事件,当点击什么按钮的时候实现什么内容显示,然后隐藏其他盒子的内容 $('#menu-1').click(function(){ $('.tab_box div:nth-child(1)').show(); $('.tab_box div:nth-child(2)').hide(); $('.tab_box div:nth-child(3)').hide(); $('.tab_box div:nth-child(4)').hide(); }); $('#menu-2').click(function(){ $('.tab_box div:nth-child(2)').show();//点击让第2个div显示 $('.tab_box div:nth-child(1)').hide(); $('.tab_box div:nth-child(3)').hide(); $('.tab_box div:nth-child(4)').hide(); }); $('#menu-3').click(function(){ $('.tab_box div:nth-child(3)').show();//点击让第3个div显示 $('.tab_box div:nth-child(2)').hide(); $('.tab_box div:nth-child(1)').hide(); $('.tab_box div:nth-child(4)').hide(); }); $('#menu-4').click(function(){ $('.tab_box div:nth-child(4)').show();//点击让第4个div显示 $('.tab_box div:nth-child(2)').hide(); $('.tab_box div:nth-child(3)').hide(); $('.tab_box div:nth-child(1)').hide(); }); }); </script>