0

您好，我对 jQuery 很陌生，我正在尝试使用带有 ajax 加载内容的选项卡。类菜单中的链接工作正常，但页脚中的链接也应加载到 tab-spacer div 中（现在不使用）。

也许制表符对我来说也不正确，我只想在制表符间隔 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>
4

2 回答 2

0

只需使用

$('#link').click(function(){return false;});
于 2013-03-28T20:40:18.260 回答
0

嗯，我真的不明白我做错了什么。我现在正在研究一个没有 jQueryUI 选项卡功能的解决方案

在我的 head 部分中包含 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>

但是没有任何效果，所有链接都在离开页面时加载。

于 2013-03-11T20:58:00.767 回答