0

こんにちは、私は jQuery が初めてで、ajax が読み込まれたコンテンツでタブを使用しようとしています。クラスメニューのリンクは正常に機能していますが、フッターのリンクもタブスペーサー div (現在は使用されていません) に読み込まれます。

タブも私にとって正しいことではないかもしれません.tab-spacer divにajaxがロードされたコンテンツが欲しいだけです。そして、この div 内の任意のリンクからコンテンツを表示したいと考えています。あなたが私を助けてくれることを願っています！

これは私のコードです

   <head><link rel="stylesheet" href="js/css/jquery-ui.css" />
<script src="js/jquery/js//jquery-1.9.1.js"></script>
<script src="js/jquery/js/jquery-ui-1.10.1.custom.js"></script><script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Error" );
        });
      }
    });
  });
  </script>

<script>
$('#tabs').tabs({
    load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
        });
    }
});
</script>
</head>
<body>
<div class="wrapper">


      <div class="container">

        </div>
        <div id="tabs">
        <div class="menu">
        <ul>
        <li><a href="#tabs-1">home</a></li>
        <li><a href="ajax/content1.html">1</a></li>
        <li><a href="ajax/content2.html">2</a></li>
        <li><a href="ajax/content3.php">3</a></li>

        </ul>
        </div>
        <div id="tabs-spacer" class="tabs-spacer tab-style"></div>
        <div id="tabs-1">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor velit, suscipit at luctus vitae, lobortis facilisis arcu. Suspendisse potenti. Quisque tempor magna a lorem tempor luctus. Curabitur erat nisl, rutrum adipiscing imperdiet ac, elementum et magna. Vivamus id erat sapien. Nam sapien justo, elementum vel blandit commodo, tristique ac ligula. Duis interdum, elit sit amet molestie hendrerit, ligula lacus consequat tortor, sed tempor arcu velit vel nibh. Etiam condimentum erat at mauris malesuada sollicitudin tincidunt mi ultricies. In hac habitasse platea dictumst. Duis mollis, turpis at porttitor pharetra, magna tellus faucibus libero, ut vehicula tortor nunc quis erat. Nunc tristique nibh eu sapien cursus ac imperdiet eros malesuada. </p>


     </div><div class="footer"><ul><li><a href="ajax/4.php" id ="link">4</a></li>
                                                                 <li><a href="ajax/5.php" id ="link">5</a></li>
                                   <li><a href="ajax/6.php" id ="link">6</a></li>

     </ul></div></div>
4

2 に答える 2

0

うーん、何が間違っているのか本当にわかりません。私は現在、jQueryUI のタブ機能を使用しないソリューションに取り組んでいます

head セクションに jquery.js を含めた後、これらのスクリプトを追加しようとしました。

$('#link').live('click', function(ev) {
    // Stop regular handling of "click" in most non-IE browsers
    ev.preventDefault();
    ev.stopPropagation();

    // Load the new content into the div (same code you had)
    $('#tabs-spacer').load($(this).attr('href'));

    // Stop regular handling of "click" in IE (and some others)
    return false;
});

もちろん、すべてのリンクには id =link があります

そして私もこれを試しました：

<script>
$('#link').bind('click', function(event) {
    var url = $(this).attr('href');
    $('#tabs-spacer').load(url);
    return false;  // cancel anchor action
});</script>

しかし、何も機能せず、すべてのリンクがページを離れて読み込まれます。

于 2013-03-11T20:58:00.767 に答える
0

ただ使う

$('#link').click(function(){return false;});
于 2013-03-28T20:40:18.260 に答える