Question

我希望在用户选择标签时将文本文件加载到内容div中，将内容插入HTML文件但内容div设置为style="display: none;。

如果选择相关标签并将所有其他内容div设置为隐藏，如何将显示设置为block？

JQuery的：

$(document).ready(function() {
  function resetTabs() {
    $("#content > div").hide();
    $("#tabs a").attr("id", "");   
  }

  var myUrl = window.location.href;
  var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
  var myUrlTabName = myUrlTab.substring(0, 4);

  (function () {
    $("#content > div").hide(); 
    $("#tabs li:first a").attr("id", "current");
    $("#content > div:first").fadeIn(); 

    $("#tabs a").on("click", function (e) {
      e.preventDefault();
      if ($(this).attr("id") == "current") {
        return
      }
      else {
        resetTabs();
        $(this).attr("id", "current"); 
        $($(this).attr('name')).fadeIn();
      }
    });

    for (i = 1; i <= $("#tabs li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
        resetTabs();
        $("a[name='" + myUrlTab + "']").attr("id", "current");
        $(myUrlTab).fadeIn();
      }
    }
  })()
});


$(document).ready(function() {
  $("#tabContent1").load("test.txt");
  $('a[name="#tab2"]').click(function() {
    $("#tabContent2").load("test.txt");
  });
});

HTML：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS/common.css" />
    <script src="JS/common.js"></script>
    <title></title> 
  </head>
  <body>
    <nav>
      <ul id="tabs">
        <li><a href="#" id="tab1" name="#tab1">Home</a></li>
        <li><a href="#" id="tab2" name="#tab2">History</a></li>
        <li><a href="#" id="tab3" name="#tab3">Specifications</a></li>
        <li><a href="#" id="tab4" name="#tab4">Gallery</a></li>    
      </ul>
    </nav>
    <div id="content">
      <div id="tabContent1"></div>
      <div id="tabContent2"></div>
      <div id="tabContent3"></div>
      <div id="tabContent4"></div>
    </div>
  </body>
</html>

我也遇到以下错误：

Uncaught TypeError: Object #tabContent2 has no method 'fadeIn'
i
st.event.dispatch 
st.event.add.y.handle

Answer 1

tabContent和标签是如何连接的？尝试将标签名称设置为实际内容ID，如下所示：

<nav>
  <ul id="tabs">
    <li><a href="#" id="tab1" name="#tabContent1">Home</a></li>
    <li><a href="#" id="tab2" name="#tabContent2">History</a></li>
    <li><a href="#" id="tab3" name="#tabContent3">Specifications</a></li>
    <li><a href="#" id="tab4" name="#tabContent4">Gallery</a></li>    
  </ul>
</nav>
<div id="content">
  <div id="tabContent1"></div>
  <div id="tabContent2"></div>
  <div id="tabContent3"></div>
  <div id="tabContent4"></div>
</div>

这样你的函数$（$（this）.attr（'name'））。fadeIn（）;应该工作得更好一点。

Answer 2

试试你的fadeIn

var title = $('#current').attr('name');
$(title).fadeIn()

而不是

  $($(this).attr('name')).fadeIn();

（oops check edit）

Answer 3

使用@Jaco Koster JSFiddle和以下JQuery的组合工作。

$(document).ready(function () {
  $("#tabContent1").load("test.txt");

  $('a[name="#tabContent1"]').click(function () {
    $("#tab2").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent1").load("test.txt");
    $("#tabContent1").show();
    $("#tabContent2").hide();
    $("#tabContent3").hide();
    $("#tabContent4").hide();
  });

  $('a[name="#tabContent2"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent2").load("test2.txt");
    $("#tabContent2").show();
    $("#tabContent1").hide();
    $("#tabContent3").hide();
    $("#tabContent4").hide();
  });

  $('a[name="#tabContent3"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab2").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent3").load("test3.txt");
    $("#tabContent3").show();
    $("#tabContent1").hide();
    $("#tabContent2").hide();
    $("#tabContent4").hide();
  });

  $('a[name="#tabContent4"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab2").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent4").load("test4.txt");
    $("#tabContent4").show();
    $("#tabContent1").hide();
    $("#tabContent2").hide();
    $("#tabContent3").hide();
  });
});

JQuery设置CSS显示：none应该是块

3 个答案: