0

ユーザーがタブを選択したときにテキストファイルをコンテンツdivにロードしようとしています。コンテンツは、HTMLファイルに挿入されていますが、コンテンツdivはに設定されていstyle="display: none;ます。

block関連するタブが選択されたときに表示を設定し、他のすべてのコンテンツdivを非表示に設定するにはどうすればよいですか？

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
4

3 に答える 3

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(); もう少しうまくいくはずです。

于 2013-02-11T15:27:51.017 に答える
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 に答える