0

当用户选择选项卡时，我希望将文本文件加载到内容 div 中，内容被插入到 HTML 文件中，但内容 div 被设置为style="display: none;.

如何将其设置为block在选择相关选项卡并将所有其他内容div设置为隐藏的情况下将显示设置为以便设置为隐藏？

查询：

$(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
4

3 回答 3

1

tabContent 和 tab 是如何连接的？尝试将选项卡的名称设置为实际的内容 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(); 应该工作得更好一点。

于 2013-02-11T15:27:51.017 回答
0

试试这个你的淡入淡出

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

代替

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

（哎呀检查编辑）

于 2013-02-11T15:58:05.023 回答
0

使用@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();
  });
});
于 2013-02-11T22:15:38.060 回答