您的位置：首页 > 其它

点击新闻标题，内容随着标题切换

2016-04-28 15:48 239 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
<style>
li{list-style: none;}
.parent{height: 150px;}
.parent ul li{float: left; width: 25%; text-align: center; background:dodgerblue;height: 50px;vertical-align: middle;font-size:25px;line-height: 50px;}
.list_c li{display: none;background-color: lightcoral;height: 100px; width: 50%;margin: auto;text-align: center;}
</style>
</head>
<body>

<div class="parent">
<ul class="list_p">
<li>公司新闻</li>
<li>商城公告</li>
<li>活动公告</li>
<li>关于我们</li>
</ul>
</div>

<div class="child" >
<ul class="list_c">
<li > 公司新闻 </li>
<li> 商城公告</li>
<li> 活动公告</li>
<li> 关于我们</li>
</ul>
</div>

<script>
$(document).ready(function() {
parent=$(".list_p").children();
child=$(".list_c").children();
child[0].style.display="block";
alert(typeof parent)
$(parent).click(function(){
$(".list_c li").css("display","none");
$(child[ $(this).index() ]).css( "display","block" );
})
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航