2015-02-11 267 views
2

我有一個垂直製表符,每個製表符的div都是用ID打開的。這三個div的是作爲跟隨DIV動態獲取ID

<div id="About-content" class="contentblock"> 
    <h1 class="Abouthead">About RBL Bank</h1> 

    <img src="images/common/rbl-bank-logo.jpg" alt="RBL Bank" class="Logos" /> 
    <p class="Aboutuspara">....</p> 
    <p class="Aboutuspara">....</p> 
    <p class="Aboutuspara">....</p> 
</div> 
<!-- @end #home-content --> 
<div id="Iksha-content" class="contentblock hidden"> 
    <h1 class="Abouthead">Iksha Foundation</h1> 

    <img src="images/CRS/Ourpartners/ikshafoundation.png" class="Logos" /> 
    <p class="Aboutuspara">...</p> 
    <p class="Aboutuspara">...</p> 
    <p class="Aboutuspara">...</p> 
</div> 
<!-- @end #about-content --> 
<div id="Iimpact-content" class="contentblock hidden"> 
    <h1 class="Abouthead">Iimpact Foundation</h1> 

    <img src="images/CRS/Ourpartners/IImpact.png" 
      alt="Iimpact Foundation" class="Logos" /> 
    <p class="Aboutuspara">...</p> 
    <p class="Aboutuspara">...</p> 
    <p class="Aboutuspara">...</p> 
</div> 

HTML和我的標籤從數據庫表來, 我希望在

Iimpact內容點擊只有DIV應該打開,因爲我已經寫了代碼,但問題是如何在點擊時動態獲取ID

<asp:ListView ID="lstAbout" runat="server"> 
    <LayoutTemplate> 
     <asp:PlaceHolder ID="itemPlaceHolder" runat="server"> 
     </asp:PlaceHolder> 
    </LayoutTemplate> 
    <ItemTemplate> 
     <li> 
      <%--I want ID to be set dynamically to the anchor tag--%> 
      <a href=""><%#Eval("ngo_name") %></a> 
     </li> 
    </ItemTemplate> 
</asp:ListView> 

而且我對隱藏和顯示jQuery是如下: -

$('#sidemenu a').click(function (e) { 
    e.preventDefault(); 

    if ($(this).hasClass('open')) { 
     // do nothing because the link is already open 
    } else { 
     var oldcontent = ".contentblock"; //$('#sidemenu a.open').attr('href'); 
     var prev = $('#sidemenu a.open').attr('href'); 
     var newcontent = $(this).attr('href'); 
     $(oldcontent).hide(); 
     $(newcontent).fadeIn().removeClass('hidden'); 

     $('#sidemenu a').removeClass('open'); 
     $(this).addClass('open'); 
    } 
}); 

或請建議,如果有任何其他方式.. !!

回答

1

如果您在ListView使用超鏈接網頁控制與ClientIDMode可預測的:

<asp:HyperLink 
ID="HyperLink" 
NavigateUrl="http://www.stackoverflow.com" 
Text='<%#Eval("ngo_name") %>' 
ClientIDMode="Predictable" 
runat="server" /> 

這應該渲染的id爲:

<a id="HyperLink0" href="">Link 1</a> 
<a id="HyperLink1" href="">Link 2</a> 
<a id="HyperLink2" href="">Link 3</a> 

正如上面的號碼將會自動遞增從零開始。

如果你想使用的標籤ID從您的數據庫,而不是你可以簡單地增加一個ClientIDRowSuffix屬性,並將其設置爲屬性:

<asp:HyperLink 
ID="HyperLink" 
NavigateUrl="http://www.stackoverflow.com" 
Text='<%#Eval("ngo_name") %>' 
ClientIDMode="Predictable" 
ClientIDRowSuffix="TabId" 
runat="server" /> 

然後,您可以從您的jQuery的點擊處理程序中讓你的身份證如下:

var id = $(this).attr('id'); 

超鏈接的ListView

<asp:ListView ID="lstAbout" runat="server"> 
     <LayoutTemplate> 
      <asp:PlaceHolder ID="itemPlaceHolder" runat="server"</asp:PlaceHolder> 
     </LayoutTemplate> 
     <ItemTemplate> 
      <li> 
        <asp:HyperLink 
        ID="HyperLink" 
        NavigateUrl="http://www.stackoverflow.com" 
        Text='<%#Eval("ngo_name") %>' 
        ClientIDMode="Predictable" 
        runat="server" /> 
      </li> 
     </ItemTemplate> 
    </asp:ListView> 

更新

如果使用上面的代碼,超鏈接的ID將呈現如下(簡化演示):

<a id="HyperLink0" href="">Link 1</a> 
<a id="HyperLink1" href="">Link 2</a> 
<a id="HyperLink2" href="">Link 3</a> 

下面的JavaScript可以用來顯示所需內容股利。:

$(function(){ 
    // Initially hide all but show first one 
    $('.contentblock').hide(); 
    $('.contentblock :first').show(); 

    $('a').click(function (e) { 
    e.preventDefault(); 
    // hide all 
    $('.contentblock').hide(); 
    var id = $(this).attr('id'); 
    // get the div number to show 
    var numberedDiv = parseFloat(id.replace("HyperLink", "")) 

    var divToShow = $('.contentblock')[numberedDiv]; 
    $(divToShow).show(); 
    }) 

}); 

jsFiddle

+0

我應該如何插入'hyperlink'在'listview'請幫助 – 2015-02-13 10:14:14

+0

@RahulSutar見更新的答案。 :) – hutchonoid 2015-02-13 10:17:01

+0

另外我得到錯誤,因爲'服務器標記不正常形成' – 2015-02-13 10:21:21

0

HTML5,你可以做類似

<a href="" data-tag="your tags"></a> 

在您的jQuery的點擊功能

$tag = $(this).data('tag'); 

下面的方法​​
0

使用,這將有助於

$('.Iimpact-content').live('click',function(){ 
var elementID=this.ID; 
});