jQuery，JQ显示与隐藏

来源：互联网发布：小米4c可以4g网络吗编辑：程序博客网时间：2024/05/22 03:39

源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>测试JQ显示隐藏</title>
<script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>
<style type="text/css">
.nav .product{

cursor:pointer;
}
.nav .product_nav{
display:none;
background-color:#f6f6f6;
padding: 10px;
margin-top:10px;
}
.pro{ margin-top: 100px;}
.pro_content{ margin-top: 10px;}
.pro_content div{ display: none;}
.pro div{
margin: 0;
padding: 0;
width: 120px;
height: 36px;
border: #f1f1f1 solid 1px;
line-height: 36px;
text-align: center;
display: inline-block;
cursor:pointer
}
.pro .on{
background-color:#ff6600;
color: #ffffff;
}
</style>
</head>
<body>

<div class="nav">
<div class="product">产品中心(点击显示子导航)</div>
<div class="product_nav">
<ol>
<li>产品分类1</li>
<li>产品分类2</li>
<li>产品分类3</li>
</ol>
</div>

</div>

<div class="pro">
<div class="on">商家推荐</div>
<div>热门产品</div>
</div>
<div class="pro_content">
<div style="display: block;">我是《商家推荐》</div>
<div>我是【热门产品】</div>
</div>
<script type="text/javascript">

$(document).ready(function(){
//点击显示子导航
$(".product").click(function(){
$(".product_nav").fadeToggle();
});
//分栏菜单
var class_top_nav=".pro div";//顶部分类菜单
var class_top_ba="on";//点击分类菜单后附加class名称
var class_nav_conrtent=".pro_content div";//分类菜单内容
$(class_top_nav).click(function(){
var num=$(class_top_nav).index(this);//获取点击元素的下标
$(this).siblings().removeClass(class_top_ba);//去处同级标签的class
$(this).addClass(class_top_ba); //给自身增加class
$(class_nav_conrtent).hide(); //隐藏标签
$(class_nav_conrtent).eq(num).show();//显示下标为num的标签
});
});
</script>
</body>
</html>

标注很清楚，我就不描述了！

阅读全文

0 0