jQuery实现选项卡

最新推荐文章于 2020-08-14 10:37:20 发布

hyb0852

最新推荐文章于 2020-08-14 10:37:20 发布

阅读量395

点赞数

本文链接：https://blog.youkuaiyun.com/hyb0852/article/details/8748182

版权

<html>
<head>
<meta charset="utf-8"/>
<title>选项卡</title>
<style>
*{margin:0;padding:0}
  body{font-size:15px;width:300px;margin:50px auto}
  .tab_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}
  .tab_content{clear:both;border:1px solid silver;height:200px;margin-left:20px;padding-left:10px}
  .hide{display:none}
  .tab_selected{background:pink}
  .hover{background:purple}
</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");