Jquery选项卡通过点击链接来防止打开新的浏览器窗口

jquery tabs prevent open a new browser window by clicking a link

本文关键字：窗口 浏览器 选项 链接 Jquery      更新时间：2023-09-26

你好，我是jQuery的新手，我正在尝试使用ajax加载内容的选项卡。类菜单中的链接工作得很好，但是页脚中的链接也会加载到tab-spacerdiv中(现在没有使用)。

也许是标签也不是对我来说正确的事情，我只是想ajax加载的内容在标签间距div。我想从这个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>

我真的不明白我做错了什么。我现在正在研究一个没有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>

但是没有效果，所有的链接都加载了离开页面

就用

$('#link').click(function(){return false;});
相关文章：