网站建设点击层显示不同的内容,我们在做网站的过程中经常要遇这到类问题,下面是我们煜阳网络工程师亲测试的代码可用,希望可以帮助各位同行朋友们。
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".title a").click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
var index = $(this).index();
$(".content").eq(index).css("display","block").siblings().css("display","none");
});
});
</script>
<div class="news-list">
<div class="title">
<a id="ac1" onclick="change(1)" class="">工作动态</a> <a id="ac2" onclick="change(2)" class="cur">
通知公告</a>
</div>
<div>
<div id="c1" style="display: none;" class="content">
<ul>
<li class="list-title"><a href="/content/?123.html" title="文晖街道人大工委积极开展人大代表接待日活动" target="_self">文晖街道人大工委积极开展人大代...</a></li>
</ul>
</div>
<div id="c2" style="display: block;" class="content">
<ul>
<li class="list-title"><a href="/content/?123.html" title="文晖街道人大工委积极开展人大代表接待日活动" target="_self">文晖街道人大工委积极开展人大代...99</a></li>
</ul>
</div>
</div>
</div>