导航

专业做网站建设公司、网页设计制作、百度优化推广、网站维护托管等网站相关业务,欢迎咨询。

域名空间 | 服务领域  网站建设1500元全包。做完验收修改到满意为止可淘宝付款有保证!
当前位置: 邯郸网站建设 > 网页设计制作百科 > 常见问题

网站建设点击层显示不同的内容


来源:邯郸煜阳网络公司  时间:2022-12-26 20:19    

 网站建设点击层显示不同的内容,我们在做网站的过程中经常要遇这到类问题,下面是我们煜阳网络工程师亲测试的代码可用,希望可以帮助各位同行朋友们。


<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>