<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*让内容是否隐藏*/
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
/*让指针在这个位置是一个小手的形状*/
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin:0 auto">
<div class="menu">
<!--自定义属性a,与相应的内容b进行对应,以此来控制显示的内容-->
<!--正常这个位置可以用索引进行处理,在此仅仅用了自定义标签-->
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<!--导入Jquery的模块-->
<script>
// 设置点击事件
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
// 点击的话就让自己加上active样式,其他去掉这个样式
var target = $(this).attr('a');
// 获取a属性的值,将这个值赋给b,找到b为这个值得标签去掉hide,其他加上hide进行隐藏
$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
python学习之网站的编写(HTML,CSS,JS)(二十二)----------示例,点击不同的菜单在相同的位置显示不同的内容
猜你喜欢
转载自blog.csdn.net/qq_41901915/article/details/83045586
今日推荐
周排行