jQuery选项卡的实现（代码简短的）

最新推荐文章于 2023-10-03 20:19:49 发布

不吵不闹小低调

最新推荐文章于 2023-10-03 20:19:49 发布

阅读量690

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/W1365966490/article/details/8748054

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8"/>
<style>
  *{margin:0;padding:0}
  body{font-size:15px}
  .tab{margin:50px auto;width:300px}
  li{list-style:none;height:30px;width:50px;border:1px solid #f50;float:left;margin-left:10px;background:#ccc;border-bottom:none}
  .tab_content{clear:both;border:1px solid #000;margin-left:10px;padding:10px;height:200px}
  .sport{display:none}
  .thing{display:none}
  .tab_selected{background:#5FFFFF}
  .hover{background:#9f0}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
  $(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>