javascript - 如何让基本的 jQuery 选项卡在 .Net 模式弹出窗口中工作？

Question

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

更新:

So I tested the code out and this works fine for basic tabs. However, I need to use this inside a .Net modal popup using their "Ajax" toolkit. Essentially this is doing a postback which I've noticed tends to fight with jQuery. In the past, I've used the jQuery live events, but I'm not sure what to bind it to... Usually you bind to an event on an object, like a click handler for a button. Here, I need to attach the tab assignment/binding ( using .tabs() ) via a live event but I'm not sure which one. I tried binding to the document load event but no luck with that:

$(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)还是依靠框架来完成？

Sample markup with jQuery UI CSS Framework classes

<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>

Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is

<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/