Jquery实现的小案例3、小选项卡_jquery做的小案例-优快云博客

本文介绍如何使用 CSS 和 jQuery 来实现一个简单的选项卡效果，当用户点击不同的菜单项时，相应的面板将显示出来，而其他面板则被隐藏。此外，还通过 CSS 添加了鼠标悬停效果。

实现的功能介绍：实现点击一个模块的内容然后出现各自属于自己的内容

利用css样式实现的功能

在鼠标移上去会实现变色会变成小手、、、

<html>

<head>
<meta charset="utf-8">
<style>
    *{margin:0;padding:0}
   body{font-size:20px;width:300px;margin:5px auto}
   .tab_menu ul li{list-style:none;float:left;width:50px;border:1px solid pink;line-height:30px;margin-left:20px;border-bottom:none;text-align:center;cursor:pointer}
   .tab_content{clear:both;border:1px solid #9f5;height:200px;margin-left:20px;padding-left:10px;}
   .hide{display:none}
   .tab_selected{background:#aaa}
   .hover{background:#9f5}

</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>//在此处的Jquery文件封装的js文件下载地址：http://download.youkuaiyun.com/detail/feilong_12/5210621
   /*
      1、鼠标点击哪个栏目，内容框要显示该栏目对应的内容
      2、同时该栏切换背景颜色
   */
   $(function(){
      var $li=$("div.tab_menu ul li");
      $li.click(function(){
        //获得当前点击的元素在集合中的索引
       var $index=$li.index(this);
       $("div.tab_content div").eq($index).show().siblings().hide();
       $(this).addClass("tab_selected").siblings().removeClass("tab_selected");
      }).hover(function(){
           $(this).addClass("hover");
       },function(){
           $(this).removeClass("hover");
      })
   })
</script>
</head>
<body>
    <div class="tab">
       <div class="tab_menu">
          <ul>
            <li class="tab_selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
           </ul>
       </div>
       <div class="tab_content">
           <div>时事</div>
           <div class="hide">体育</div>
           <div class="hide">娱乐</div>
       </div>
   </div>
</body>
</html>