jq table

最新推荐文章于 2024-07-31 15:52:50 发布

转载最新推荐文章于 2024-07-31 15:52:50 发布 · 2k 阅读

//html

//css

body {
   margin:0;
   padding:0;
}
ul,li,p {
   list-style:none;
   margin:0;
   padding:0;
}
p {
   border:1px solid #333;
   padding:10px 0;
}
p a {
   padding:0 10px;
   height:30px;
   display:inline-block;
   line-height:30px;
}
.centera {
   padding:20px;
   overflow:hidden;
}
.hover {
   background:#eee;
}
#tablea {
   background:#eee;
}
.box {
   margin:10px;
   display:none
}

//js

$(function(){
$(".tablea").find(".box:first").show(); //为每个BOX的第一个元素显示
$("#oranger a").on("mouseover",function(){ //给a标签添加事件
var index=$(this).index(); //获取当前a标签的个数
$(this).parent().next().find(".box").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示
$(this).addClass("hover").siblings().removeClass("hover"); //a标签显示，同辈元素隐藏
})
})