asp.net - 当我在内容页面中使用 Jquery 选项卡控件时，它不起作用

Question

我在 asp.net web 应用程序中有一个母版页，default.aspx 是母版页的内容页。

我在 default.aspx 中使用 jQuery 选项卡，当我运行应用程序时它不起作用:ui-tabs 的样式已经出现，但我无法单击选项卡。

当我在母版页本身尝试同样的事情时，选项卡控件工作正常我的意思是我可以点击显示选项卡容器适当内容的选项卡

我正在使用 jQuery UI

 <link href="css/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/tab/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>

   <div id="quicksearch">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Quick Search</a></li>
            <li><a href="#tabs-2">Quick Register</a></li>
        </ul>
        <div id="tabs-1">
            <h1>
                Quick search</h1>
        </div>
        <div id="tabs-2">
            <h1>
                Quick Register</h1>
        </div>
    </div>
</div>

我用来选择标签的函数:

$( "#tabs" ).tabs();

这里会出现什么问题？

Answer 1

您的 ID 将被 asp.net 破坏。使用类选择器像这样引用您的选项卡，当您的页面呈现时该类选择器将保持不变。

标题部分的

母版页

你的 jquery 在这里导入

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

 <script type="text/javascript">
   $(document).ready(function ()
    {
    //initialization code
     $(".tabs" ).tabs();
     }
</script>

然后在你的内容页面

<div class="tabs">
    <ul>
        <li><a href="#tabs-1">Quick Search</a></li>
        <li><a href="#tabs-2">Quick Register</a></li>
    </ul>
    <div id="tabs-1">
        <h1>
            Quick search</h1>
    </div>
    <div id="tabs-2">
        <h1>
            Quick Register</h1>
    </div>
</div>

在撰写本文时，以上链接对我有用。压缩演示 here