Question

您好我正在使用jquery选项卡菜单通过面板中的ajax加载内容。这是我的代码：

    <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>

因为我还需要内容面板中的链接解决方案，但这也不起作用。希望您能够帮助我。非常感谢你！

Answer 1

尝试：

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

Answer 2

在jQuery回调中，返回false以阻止默认操作。链接的默认操作是导航到href属性的位置。

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

Answer 3

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

Answer 4

在您的页脚链接上，您可以这样做：

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

如果您想在所有链接上执行此操作，请在每个链接上绑定click事件：

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

如何使用jquery选项卡加载多个菜单

4 个答案: