如何将现有的 HTML/JQuery 转换为 ASP.net/JQuery 代码

Question

我有以下 HTML 页面，它显示一些选项卡以及内容，并根据用户单击的选项卡更改内容可见性：

HTML：

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>
    <li><a href="#" title="tab4">Four</a></li>    
</ul>

<div id="content"> 
    <div id="tab1">THIS IS TAB 1</div>
    <div id="tab2">THIS IS TAB 2</div>
    <div id="tab3">THIS IS TAB 3</div>
    <div id="tab4">THIS IS TAB 4</div>
</div>

隐藏和显示content的JQuery：

<script> 
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();
</script>

我最终使用<asp:BulletedList> 代替UL/LI 和<asp:Panel> 代替UL/LI 和DIV，而不是DIV，因为我必须在代码后面显示和隐藏选项卡。

所以我使用 ASP.net 控件创建了以下内容：

<asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
    <asp:ListItem Text="Status" Value="#"></asp:ListItem>
    <asp:ListItem Text="Your Tasks" Value="#"></asp:ListItem>
    <asp:ListItem Text="Messages" Value="#"></asp:ListItem>
    <asp:ListItem Text="Dependencies" Value="#"></asp:ListItem>
    <asp:ListItem Text="Documents" Value="#"></asp:ListItem>
    <asp:ListItem Text="Pro-Forma" Value="#"></asp:ListItem>
    <asp:ListItem Text="Admin Controls" Value="#"></asp:ListItem>
</asp:BulletedList>

<asp:Panel ID="content" runat="server" ClientIDMode="Static">
    <asp:Panel ID="tab1" ClientIDMode="Static" runat="server">THIS IS A TEST #1</asp:Panel>
    <asp:Panel ID="tab2" ClientIDMode="Static" runat="server">THIS IS A TEST #2</asp:Panel>
    <asp:Panel ID="tab3" ClientIDMode="Static" runat="server">THIS IS A TEST #3</asp:Panel>
    <asp:Panel ID="tab4" ClientIDMode="Static" runat="server">THIS IS A TEST #4</asp:Panel>
    <asp:Panel ID="tab5" ClientIDMode="Static" runat="server">THIS IS A TEST #5</asp:Panel>
    <asp:Panel ID="tab6" ClientIDMode="Static" runat="server">THIS IS A TEST #6</asp:Panel>
    <asp:Panel ID="tab7" ClientIDMode="Static" runat="server">THIS IS A TEST #7</asp:Panel>
</asp:Panel>

并保持与之前发布的相同的 JQuery。当我第一次加载 ASP.net 页面时，Status 选项卡被突出显示并且来自content 面板的tab1 被显示。当我点击任何标签时，content 面板不显示任何内容，它是空白的。

我意识到，这是因为 JQuery 正在使用每个 LI 内链接中的 title 标签，但不幸的是我不能在 <asp:ListItem> 内使用 HyperLink，因为 VS 抱怨说这不是标准。如何修改我的代码，以便能够使用 ASP.net 控件并使 JQuery 正常工作？

Chrome 显示：

Answer 1

用这个替换开头的 HTML，将标签目标放在 href 中：

<asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
    <asp:ListItem Text="Status" Value="#tab1"></asp:ListItem>
    <asp:ListItem Text="Your Tasks" Value="#tab2"></asp:ListItem>
    <asp:ListItem Text="Messages" Value="#tab3"></asp:ListItem>
    <asp:ListItem Text="Dependencies" Value="#tab4"></asp:ListItem>
    <asp:ListItem Text="Documents" Value="#tab5"></asp:ListItem>
    <asp:ListItem Text="Pro-Forma" Value="#tab6"></asp:ListItem>
    <asp:ListItem Text="Admin Controls" Value="#tab7"></asp:ListItem>
</asp:BulletedList>

然后将 jQuery 中的最后一行更改为：

$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab

收件人：

$($(this).attr('href')).fadeIn();

修改您的脚本块，以便在活动选项卡的 fadeIn 上链接动画，如下所示：

// Initially hide all content
$("#content div").css('display', 'none');

// Then activate the first tab
$("#tabs li:first").attr("id", "current");

// Now fade it in
$("#content div:first").fadeIn();

// Click event 
$('#tabs a').click(function (e) {

    // Get a handle to the current object when we move into the scope 
    // of the hide callback
    var what = $(this);

    e.preventDefault();

    // Hide all content
    $("#content div:visible").hide(
        0,
        function () {
            $("#tabs li").attr("id", ""); //Reset id's
            what.parent().attr("id", "current"); // Activate this
            $(what.attr('href')).fadeIn();
        }
    ); 

    // Return false to ensure navigation doesn't fire
    return false;
});

Answer 2

在这里找到这个答案：http://channel9.msdn.com/Forums/TechOff/257894-aspnet-BulletedList-list-item-with-HTML-

尝试使用中继器。 BulletedList 很遗憾其 ListItem 不支持 HTML。

标记

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate><li><span class="label">Test</span> <%# Container.DataItem %></li></ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>