<body>
<!-- Tab栏 -->
<!-- css部分 -->
<style>
.Tab li {
text-align: center;
line-height: 50px;
width: 100px;
height: 50px;
background-color: pink;
float: left;
list-style: none;
margin-right: 20px;
color: #fff;
font-size: 20px;
}
</style>
<!-- HTML部分 -->
<div class="Tab">
<ul>
<li id="list1" class="active">首页</li>
<li id="list2">新闻动态</li>
<li id="list3">信息公开</li>
<li id="list4">党建</li>
<li id="list5">社会服务</li>
</ul>
</div>
<div class="TabCon">
<div id="con_list1" style="display: block;">首页内容</div>
<div id="con_list2" style="display: none;">新闻动态内容</div>
<div id="con_list3" style="display: none;">信息公开内容</div>
<div id="con_list4" style="display: none;">党建内容</div>
<div id="con_list5" style="display: none;">社会服务内容</div>
</div>
<script>
$(function() {
$('.Tab ul li').hover(function() {
$(this).addClass('active').siblings().removeClass('active')
var newId = 'con_' + $(this).attr('id')
$('#' + newId).css('display', 'block').siblings().css('display', 'none')
})
// 这种写法是在文档加载完后执行代码
// attr 设置或获取被选元素的属性值 接收两个参数 $('#list1').attr('alass')
// siblings 获取的是兄弟元素 不包括自己
// addClass 追加class
// removeClass 删除class
// .css 设置css样式 可设置单个或多个属性 $(#list1).css('color','#f00');
})
</script>
</body>
</html>
1925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
