我想顯示/隱藏基於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>

來源

2012-12-21 sai

你的意思是「代碼無法正常工作」，請嘗試解釋你所面臨的問題。 –

爲什麼'$（$（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。

來源

2012-12-21 17:30:47 inVINCEble

你能解釋這個答案嗎？ – 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; 
     }); 
}

來源

2012-12-21 17:00:42

你指定的事件處理程序之前存在於頁面上的元素。更改腳本的頭部部分，這...

<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() { })代碼使你的腳本運行時，該文件已準備就緒，或者當已創建的所有元素。

來源

2012-12-21 17:07:21 Archer

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

來源

2012-12-21 17:12:01 Jai

顯示/隱藏div使用jquery和c＃

Default.aspx的

JQuery的

回答

相關問題