Jquery 无法处理内容页面

Question

是否可以使用 JQuery UI 在内容页面中使用选项卡式布局？我在母版页中有选项卡式布局，当我尝试在内容页中添加另一个选项卡式布局时，JQuery 被忽略。

或者如何在内容页面上使用 Jquery UI？假设我在内容页面上有按钮，并希望从 css 文件中获得 UI 效果。那可能吗？有人可以给我相同的示例吗？

非常感谢任何帮助。

这是相同的母版页代码，它工作正常。

Header 部分包含 link 到 Jquery 文件。

<link href="css/jquery-ui.css" rel="stylesheet" />

    <style>

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 8em; }
.ui-tabs-vertical .ui-tabs-nav li {  width: 8em; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { width:6em ; border:none}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border:none; display:block }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
    </style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>

 <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First Tab</a></li>
                <li><a href="#tabs-2">Second</a></li>
                <li><a href="#tabs-3">Third</a></li>
            </ul>
            <div id="tabs-1">Data from Tab1</div>
            <div id="tabs-2">Data from Tab2</div>
            <div id="tabs-3">Data from Tab3</div>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>
        </div>


    </form>
    <script type="text/javascript" src="external/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
            //alert("Hi from JS");
        });

        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");

    </script>

这是我的内容页面。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <link href="css/jquery-ui.css" type="text/css" rel="stylesheet" />
        <style>

        </style>
          <div id="tabs">
            <ul>
                <li><a href="#tabs-4">First Tab</a></li>
                <li><a href="#tabs-5">Second</a></li>
                <li><a href="#tabs-6">Third</a></li>
            </ul>
            <div id="tabs-4">Data from contentPg Tab1</div>
            <div id="tabs-5">Data from contentPg Tab2</div>
            <div id="tabs-6">Data from contentPg Tab3</div>
        </div>
            <script type="text/javascript" src="external/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
         <script>
             $(document).ready(function () {
                 //alert("Hi from JS");
             });

             $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
             $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");

    </script>
    <asp:Button ID="btn1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
</asp:Content>

这是我在网页上获得的输出。

Answer 1

那是因为您在母版页中有一个名为 "tabs" 的 ID，并且在内容页（您有 "tabs"）中也使用了相同的 ID。 ID 必须是唯一的。

我建议改用 classes； class="tabs" 而不是 id 然后你的代码可以切换到使用

$(".tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");

并且它将应用于所有选项卡（包括内容页面中的选项卡）

Jquery 无法处理内容页面

Jquery not working on content page

asp.net

jquery

jquery-ui