Question

每个标签都有一个垂直标签，按ID打开div。三个div如下：

div的HTML

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

我的标签来自数据库表，

时我想要的单击

Iimpact-content 只会打开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');
    }
});

或者请建议是否还有其他方式.. !!

Answer 1

如果您在ListView中使用带有ClientIDMode的HyperLink网络控件，则可预测：

<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点击处理程序中获取您的ID，如下所示：

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

使用HyperLink的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>

<强>更新

如果您使用上述代码，HyperLink ID将呈现如下（演示简化）：

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

以下JavaScript可用于显示所需的内容div。：

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

Answer 2

HTML5你可以做类似

的事情

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

在您的Jquery点击功能

中

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

或

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

Answer 3

使用以下方法，它会有所帮助

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

动态获取ID

3 个答案: