5

如何修改我的 javascript 和 HTML，以便第一个选项卡正常工作，第二个选项卡将我的窗口引导到一个全新的页面？

我发现了这个：http ://snipplr.com/view/9513/ ，但不知道如何实现它。

我的脚本：

<script type="text/javascript">
$(document).ready(function(){

$('#tabs').tabs();      

    if($("#tabs") && document.location.hash){
        $.scrollTo("#tabs");
    }
    $("#tabs ul").localScroll({ 
        target:"#tabs",
        duration:0,
            hash:true
    });

    $('#tabs-min').tabs();

});

我的 HTML

<div id="tabs"><ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="URL HERE" class="leave">Tab 2</a></li></ul>

  <div id="tab1">tab1 content</div>
</div>
4

1 回答 1

1

我有一个小提琴在这里运行。它并不完全有效，我猜这是因为运行小提琴不会让你离开小提琴（因此window.location实际上不起作用），但你可以看到它是如何完成的。我已经在自己的环境中测试了这段代码，它确实有效。

您实质上为要离开的链接添加了一个类（在我的情况下，我添加了类leave）。然后，在 beforeActivate 上，您检查新选项卡的链接是否具有类leave，如果有，则前往它的链接位置。

让我知道这是否适合您。

<script>
$(function() {
    $( "#tabs" ).tabs({

            beforeActivate: function(event, ui) {

                if (ui.newTab.find("a").hasClass("leave")) {

                     alert("leaving...");
                     window.location = ui.newTab.find("a").attr("href");
                     return false;
                }            
        }
    });
});
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="http://www.google.com" class="leave">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        ...
    </div>
    <div id="tabs-2">
        ...
    </div>
    <div id="tabs-3">
       ....
    </div>
</div>
于 2012-11-06T19:28:32.147 回答