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

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>


在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码