0

我的问题是我无法使用我编写的 javascript 让我的标签显示我的数据。它会在页面加载时显示（默认操作），但在我使用导航时不会显示任何 tab_content。

Javascript

$(document).ready(function() {

  //Default Action

  $(".tab_content").hide(); //Hide all content
  $("dl.tabs dd:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("dl.tabs dd").click(function(event) {
    event.preventDefault();
      $("dl.tabs dd").removeClass("active"); //Remove any "active" class
      $(this).addClass("active"); //Add "active" class to selected tab
      $(".tab_content").hide(); //Hide all tab content
      var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active content
      return false;
  });
});

的HTML

<div class="six columns">
  <div class="panel">
    <dl class="nice vertical tabs">
        <dd><a id="(dynamic id)">(tab name)</a><dd>
        <dd><a id="(dynamic id)">(tab name)</a><dd>
        <dd><a id="(dynamic id)">(tab name)</a><dd>
    </dl>
  </div>
</div>

<div class="six columns">
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
</div>
4

2 回答 2

3

你的 jQuery 对象是空的，看看它的选择器：

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(); //Fade in the active content

activeTab是href属性，不是选择器也不是 DOM 元素，为什么它应该工作......？

于 2012-10-16T01:40:55.060 回答
1

一旦你修复了类名tab_content与标签的不匹配tabs_content并在标签中包含 href，你的代码基本上就可以工作了A。当前没有用于查找代码的 href

href 需要采用“#idValue”格式

我做了这 2 处更改，这里是工作演示

http://jsfiddle.net/WFW6k/1/

于 2012-10-16T02:02:33.373 回答