2

您好，我正在使用 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>

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

4

4 回答 4

2

尝试：

$('#link').click(function(e) {
    e.preventDefault();
    $('#tabs').load('agb.php');
});
于 2013-03-09T09:52:13.733 回答
0

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

 $('#link').click(function() {
      $('#tabs').load('agb.php');
      return false;
 });
于 2013-03-09T09:51:17.397 回答
0 
$('#link').click(function(e) {
    e.preventDefault();
    $('#tabs').load('agb.php');
     return false;
});
于 2013-03-09T09:54:20.483 回答
0

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

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

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

$('a').on('click', function(e) { ... });
于 2013-03-09T10:51:06.383 回答