如何在.Net模式弹出窗口中使用基本的jQuery选项卡？

Question

真的很简单的问题:我错过了什么吗？似乎这应该是基本设置所需的全部......目前我正在获得一个非风格化的版本(即没有标签,只是纯文本/ html).所以它们看起来不像标签,当你点击它们时,没有任何隐藏/显示,就像标签一样.我是否必须手动连接javascript以显示和隐藏选项卡的内容,或者框架是否为我执行此操作？

更新:

所以我测试了代码,这适用于基本选项卡.但是,我需要使用它们的"Ajax"工具包在.Net模式弹出窗口中使用它.从本质上讲,这是一个回发,我注意到倾向于与jQuery战斗.在过去,我使用了jQuery 实时事件,但我不确定将它绑定到什么...通常绑定到对象上的事件,如按钮的单击处理程序.在这里,我需要通过直播活动附加标签分配/绑定(使用.tabs()),但我不确定是哪一个.我尝试绑定到文件加载事件但没有运气:

$(document).live('load', bind_tabs);

有任何想法吗？

页面上包含样式表和Javascript链接:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

在我的样式表中添加了以下行:

.ui-tabs .ui-tabs-hide { display: none; }

在页面中添加了以下脚本:

<script type="text/javascript">
  $(function () {
  $("#tabs2").tabs();
  $("#tabs").tabs();
  });
</script>

HTML:

<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>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

还注意到页面上的"主题"文档(http://jqueryui.com/demos/tabs/#theming),它声明了以下内容.我应该手动输入所有这些样式(如ui-widget)还是依靠框架来完成它？

使用jQuery UI CSS Framework类进行示例标记

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

注意:这是选项卡插件生成的标记示例,而不是用于创建选项卡的标记.唯一需要的标记是

<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>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Answer 1

一切看起来都很好.您确定要正确链接文件吗？

http://jsfiddle.net/GwnHq/