当我在内容页面中使用它时，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>

以上链接在撰写本文时对我有用.Zipped demo here

Answer 2

@AbideMasaraure解决了我的问题....千万感谢他...... 问题是样式表

中内容类中的负z-index