Question

我有一个带有jQuery选项卡的ASP.Net主页。

我试图像这样设置：

<div id="tabs">
    <ul>
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="Settings.aspx"">Settings</a></li>
        <li><a href="About.aspx">About</a></li>
    </ul>
    <div>
        <asp:ContentPlaceHolder ID="Content" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</div>

contentplaceholder的div位于tab div内，使jQuery选项卡环绕内容。不幸的是，jQuery在将其转换为真正的jQuery选项卡时会复制母版页的所有内容：

<script>
    $(document).ready(function () {
        $("#tabs").tabs();
    });
</script>

我该怎么做才能避免这种情况？

Answer 1

我不熟悉jQuery UI标签插件，但是从我在documentation中看到的，你应该有一个div每个标签，并且锚点应该链接到各个div的id：< / p>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
</div>

看起来你只有一个div ...我看不出你想要这个如何工作。

Answer 2

你的问题是JQuery标签改变了内容在页面中加载的三个div的可见性。您使用的页面不同。

因此，如果您想要的是，可以利用JQuery ui CSS作为标签。

然后，简单的方法是将类名复制到li-tags中，并使一些服务器端逻辑更改活动/非活动选项卡的类。我自己做了一个MVC解决方案，我希望布局保持一致，因此选择了JQuery UI。

一路走来：

    <li><a href="Default.aspx" class="ui-tabs... ui-... <%
    if(HttpContext.current.url.contains("Default.aspx"))%><%:ui-active-tab%><%
    %>" >Home</a></li>
    <li><a href="Settings.aspx" class="ui-tabs... ui-... <%
    if(HttpContext.current.url.contains("Settings.aspx"))%><%:ui-active-tab%><%
    %>" >Settings</a></li>

语法是从内存中编写的，包括C＃和类名。所以请原谅我在这方面的错误。

希望我猜对了你的问题。

Answer 3

我正在使用Erlend D对此站点进行编程。问题是我们希望选项卡成为页面的主菜单，因此可以使用母版页。如何将母版页的“子元素”合并到这些div中？

例如：如果您有以下页面：one.aspx，two.aspx和three.aspx，并且您希望母版页中的jqueryui选项卡链接到这些页面，那么如何做到这一点？

ASP.Net Masterpage和jQuery创建重复的内容

3 个答案: