jquery点击show(),hide()导航例子

需求：

（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;
/*//让鼠标成手型*/
    cursor: pointer;
 }    .tab_box{        clear: both;        width: 240px;        border: double 3px darkgray;        background-color: #ffffff;        margin-left: 38px;    }</style>

jQuery代码：

 <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>