5

最初のタブが通常どおりに機能し、2 番目のタブがウィンドウをまったく新しいページに誘導するように、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 に答える