Question

您好我是jQuery的新手，我正在尝试使用带有ajax加载内容的标签。类菜单中的链接工作正常，但页脚中的链接也应加载到tab-spacer div（现在没有使用）。

也许tab也不适合我，我只想在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>

Answer 1

是的，我真的不明白我做错了什么。我现在正在使用没有jQueryUI选项卡功能的解决方案

在我的脑子部分包含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>

但没有任何作用，所有链接都会加载离开页面。

Answer 2

只需使用

$('#link').click(function(){return false;});

jquery选项卡通过单击链接阻止打开新的浏览器窗口

2 个答案: