Question

如何修改我的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>

Answer 1

我有一个小提琴并且正在运行here。它并不完全有效，而且我猜它是因为经营一个小提琴不会让你离开小提琴（因此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>

jQuery UI选项卡 - 选项卡和onselect的组合转到URL

1 个答案: