如何使用jquery製表符加載多行菜單

您好我正在使用jquery製表符菜單通過面板中的ajax加載內容。這是我的代碼：如何使用jquery製表符加載多行菜單

<head><script> 
     $(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function(event, ui) { 
       ui.jqXHR.error(function() { 
       ui.panel.html(
       "error"); 
       }); 
      } 
     }); 
     }); 
</script> 


</head> 
<body> 
<div class="wrapper"> 

    <div id="tabs"> 
    <div class="menu"> 
    <ul> 
    <li><a href="#tabs-1">Startseite</a></li> 
    <li><a href="ajax/content1.html">Link1</a></li> 
    <li><a href="ajax/content2.html">FAQ</a></li> 

    </ul> 
    </div> 
    <div id="tabs-1" class="tab-style"> 
    <h1> content</h1> 
    <p> Lorem ipsum dolor sit am...... tristique eget, accumsan eget quam. </p> 

    </div><div class="footer"><ul><li><a href="ajax/agb.php" id ="link">AGB</a></li></ul> 


    </div>

菜單上面的正常工作和標籤的內容是在面板中正確加載。但通過單擊頁腳菜單中的鏈接，它將離開頁面。

我已經試過如下：

<div class="footer"><ul><li><a href="#" id ="link">AGB</a></li></ul> 

    <script type="text/javascript"> 
    $('#link').click(function() { 
      $('#tabs').load('agb.php'); 
    }); 
</script> 
    </div>

，因爲我還需要在內容面板環節的解決方案，但是這也不能正常工作。希望您能夠幫助我。萬分感謝！

來源

2013-03-09 user1829716

根據[文檔]（http://jqueryui.com/tabs/#ajax），jQuery UI代碼看起來很好。你確定你已經包含了jQueryUI和jQuery嗎？ – soyuka 2013-03-09 09:52:26

是的，我沒有標籤在上面的菜單中工作正常。你說得對，這是我第一次嘗試jqueryUI選項卡。 – user1829716 2013-03-09 10:45:01

在jQuery回調函數中，返回false以阻止默認操作。鏈接的默認操作是導航到href屬性的位置。

$('#link').click(function() { 
     $('#tabs').load('agb.php'); 
     return false; 
});

來源

2013-03-09 09:51:17 FakeRainBrigand

嘗試：

$('#link').click(function(e) { 
    e.preventDefault(); 
    $('#tabs').load('agb.php'); 
});

來源

2013-03-09 09:52:13

好的，這加載我的面板agb.php，但它只是加載agb.php和上面的菜單和頁腳消失。我可以在內容頁面中重新定義它，但有沒有辦法，它的行爲與上面標籤菜單中的鏈接相似，因此不需要重新定義標籤菜單和頁腳。通過這種方式，我還需要每個鏈接都帶有自己的Javascript塊的ID，是否有解決方案可以應用於內容面板中的每個鏈接。 – user1829716 2013-03-09 10:41:25

您可以爲您想要掛鉤到標籤系統的每個鏈接提供一個班級的課程。然後你可以做一些像$（'。tablink'）。click（）。你確定php頁面返回一個有效的html，可以在tabcontrol中注入嗎？ – 2013-03-09 11:42:07

嗯是的，我的agb.php返回有效的HTML，沒有body，html或doctype聲明，就像jqueryui例子中一樣。菜單不是我必須給頁腳一個自己的ID行爲像一個標籤鏈接？每次我點擊鏈接那裏，agb被注入到標籤容器中，但菜單和頁腳不再顯示。對於鏈接類，以及我可以給每個鏈接一個自己的類，但我怎麼可以做這個函數變量或如何我可以給鏈接的功能，如：$（'＃tabs'）。load（varLink）; – user1829716 2013-03-11 15:58:46

$('#link').click(function(e) { 
    e.preventDefault(); 
    $('#tabs').load('agb.php'); 
    return false; 
});

來源

2013-03-09 09:54:20 Amrendra

在您的頁腳鏈接，你可以這樣做：

$('.footer a').on('click', function(e) { 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('#tabs').load(link); 
});

如果你想要做的所有鏈接，綁定click事件在每個鏈接上：

$('a').on('click', function(e) { ... });

來源

2013-03-09 10:51:06 soyuka

如何使用jquery製表符加載多行菜單

回答

相關問題