节省代码，利用jquery实现选项卡

最新推荐文章于 2024-10-05 16:25:10 发布

绮羅

最新推荐文章于 2024-10-05 16:25:10 发布

阅读量679

点赞数

本文链接：https://blog.youkuaiyun.com/ruoyuanyi/article/details/8748023

版权

本文展示了一个简单的HTML页面如何通过JavaScript实现动态效果，包括标签栏点击切换内容及鼠标悬停样式变化等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta charset="utf-8"/>
<style>
  *{margin:0;padding:0}
  body{font-size:15px;width:300px;margin:50px auto}
  .tou ul li{list-style:none;float:left;width:50px;border:1px solid orange;line-height:30px;margin-left:20px;border-bottom:none;text-align:center;cursor:pointer}
  .content{clear:both;border:1px solid orange;height:200px;margin-left:20px;padding-left:10px}
  .hide{display:none}
  .moren{background:brown}
  .hover{background:red}
</style>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
/*
   1,鼠标点击哪个栏目,内容框要显示该栏目对应的内容
   2,同时该栏目切换背景颜色
   3,鼠标移入移出改变背景颜色
  */
  $(function(){
   var $li = $("div.tou ul li");
   $li.click(function(){
    //获得当前点击的元素在集合中的索引
    var $index = $li.index(this);
    $("div.content div").eq($index).show().siblings().hide();
    $(this).addClass("moren").siblings().removeClass("moren");
   }).hover(function(){
    $(this).addClass("hover");
   },function(){
    $(this).removeClass("hover");
   });
  })
</script>
</head>
<body>
<div class="tab">
  <div class="tou">
   <ul>
    <li class="moren">时事</li>
    <li >体育</li>
    <li>娱乐</li>
   </ul>
  </div>

</div>

</div>
</body>
</html>