jquery做的选项卡

最新推荐文章于 2021-05-31 04:07:29 发布

lmw773034423

最新推荐文章于 2021-05-31 04:07:29 发布

阅读量433

点赞数

本文链接：https://blog.csdn.net/lmw773034423/article/details/8842118

版权

<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0}
   body{font-size:15px;width:300px;margin:5px auto}
   .menu ul li{list-style:none;float:left;width:50px;border:1px solid #ccc;line-height:30px;margin-left:20px;border-bottom:none;text-align:center;cursor:pointer;}
   .content{clear:both;border:1px solid green;height:200px;margin-left:20px;padding-left:10px}
   .hide{display:none}
   .show{background:orange}
   .hover{background:yellow}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>

/* $(function(){
    var $li = $("div.menu ul li");
$li.click(function(){
    var $index = $(this).index();//获取索引值
    $("div.content div").eq($index).show().siblings().hide();
    $(this).addClass("show").siblings().removeClass("show");
    }).hover(function(){
      $(this).addClass("hover");
   },function(){
         $(this).removeClass("hover");
    });

});

*/
$(function(){
var $li=$("div.menu ul li");
$li.click(function(){

$li.click(function(){
     var $index=$(this).index();
  $("div.content div").eq($index).show().siblings().hide();
  $(this).addClass("show").siblings().removeClass("show");
}).hover(function(){
      $(this).addClass("hover");
},function(){
      $(this).removeClass("hover");
});
});
})
</script>
<body>
<div>
<div class="menu">
   <ul>
    <li class="show">时事</li>
    <li>娱乐</li>
    <li>体育</li>
   </ul>
</div>
<div class="content">
  <div>时事</div>
  <div class="hide">娱乐</div>
  <div class="hide">体育</div>
<div>
<div>
</body>
</html>