问题描述：

我想显示/隐藏基于jquery使用<a href="#id">三个div。但代码不起作用。当我使用rel属性使用<a>链接进行映射时，代码工作正常。显示/隐藏div使用jquery和c＃

例如：<a rel="cat1" class="selected">

Default.aspx的

<div id="featuredleftdiv"> 
    <script type="text/javascript"> 
     var featuredposts = new ddtabcontent("featuredposts") 
     featuredposts.setpersist(true) 
     featuredposts.setselectedClassTarget("link") 
     featuredposts.init(10000) 
    </script> 

    <ul id="featuredposts" class="featuredposts"> 
     <li><a href="#cat1" class="menu">a</a></li> 
     <li><a href="#cat2" class="menu">b</a></li> 
    </ul> 

    <div class="clear"></div> 

    <div id="cat1" class="featuredposts_content"> 
     <asp:UpdatePanel ID="UpdatePanel4" runat="server"> 
      <ContentTemplate> 
       <asp:ListView ID="ListView4" runat="server" GroupItemCount="1" OnPagePropertiesChanging="ListView4_PagePropertiesChanging"></asp:ListView> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 

    <div id="cat2" class="featuredposts_content"> 
     <asp:UpdatePanel ID="UpdatePanel5" runat="server"> 
      <ContentTemplate> 
       <asp:ListView ID="ListView5" runat="server" GroupItemCount="1" OnPagePropertiesChanging="ListView4_PagePropertiesChanging"></asp:ListView> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div>

JQuery的

在HTML

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
    $("a.menu").click(function() { 
     $("div.featuredposts_content").hide(); 
     $($(this).attr('href')).show(); 
     return false; 
    }); 
</script>

你的意思是“代码无法正常工作”，请尝试解释你所面临的问题。 –

为什么'$（$（this）.attr（'href'））。show（）;'？ – lante

http://jsfiddle.net/mC23h/ - 看起来是为我工作。 –

答

尝试这样的事情...

<html> 
    <script> 
     $(document).ready(function(){ 
     $("a.menu").click(function() { 
      $("div.featuredposts_content").hide(); 
      $("#" + $(this).attr("value")).show(); 
     }); 
     }) 
    </script> 
    <body> 
     <ul id="featuredposts" class="featuredposts"> 
     <li><a href="#" class="menu" value="IdOfDiv1">something a</a></li> 
     <li><a href="#" class="menu" value="IdOfDiv2">something b</a></li> 
     </ul> 

     <div id="IdOfDiv1" class="featuredposts_content"> 
     Cat1 
     </div> 

     <div id="IdOfDiv2" class="featuredposts_content"> 
     Cat2 
     </div> 
    </body> 
</html>

编辑：这里有一个快速说明。

$(document).ready()将确保在页面完全加载之前不会发生点击连线。第一次加载页面时，所有内容都正在显示。

一旦用户点击menu类别的链接之一，该函数将运行。它会隐藏每div，其类别为featuredposts_content。然后，基于哪个链接被点击，它抓住了value并用它来设置哪个div来显示。链接中的value是要显示的div的id。

你能解释这个答案吗？ – rds

我用快速解释更新了答案。 – inVINCEble

答

貌似更新面板的头节被搞乱起来。

你需要在每个回发后绑定事件，否则它就会被重新设置为默认页面

$(function() { 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack); 
    PostBack(); 
}); 

function PostBack(){ 
     $("a.menu").off().on.('click' , function() { 
      $("div.featuredposts_content").hide(); 
      $($(this).attr('href')).show(); 
      return false; 
     }); 
}

答

你指定的事件处理程序之前存在于页面上的元素。更改脚本的头部部分，这...

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("a.menu").click(function() { 
      $("div.featuredposts_content").hide(); 
      $($(this).attr('href')).show(); 
      return false; 
     }); 
    }); 
</script>

的$(function() { })代码使你的脚本运行时，该文件已准备就绪，或者当已创建的所有元素。

但是OP提到它与“rel”一起工作，所以它应该具有相同的效果，即没有附加事件。 – Sunny

答

嗯，我想在不使用该事件的文档准备处理或负载功能的问题是：

<script type="text/javascript"> 
    $(document).ready(function(){ // <-------------------------you are missing this 
    $("a.menu").click(function() { 
     $("div.featuredposts_content").hide(); 
     $($(this).attr('href')).show(); 
     return false; 
    }); 
    }); //<---------------------------------------------------- 
</script>

显示/隐藏div使用jquery和c＃

Default.aspx的

JQuery的

相关推荐