Question

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

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

非常感谢任何帮助。

这里的主页代码可以正常使用。

标题部分包含指向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>

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

enter image description here

Answer 1

这是因为你在母版页中有一个名为＆＃34;标签＆＃34;并且在内容页面中使用了相同的ID（您还有＃34;标签＆＃34;）。 Id必须是唯一的。

我建议改用班级;类=＆＃34;凸片＆＃34;而不是id，那么你的代码可以切换到使用

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

它将适用于所有标签（包括内容页面中的标签）

Jquery没有在内容页面上工作

1 个答案: