Question

我的问题是我无法使用我编写的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>

Answer 1

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

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

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

Answer 2

一旦您修复了类名tab_content与tabs_content的不匹配，并且在A标记中包含href，您的代码基本上就可以使用。目前没有用于查找代码的href

href必须采用格式“#idValue”

我做了这2个更改，这里正在进行演示

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

Javascript标签数据，点击显示

2 个答案: