0 
<ul id="ulid" class="tabs">
    <li> 
        <a href="#Tab1" id="newsdtls" class="dtls">text1</a>
    </li>
    <li>    
        <a href="#Tab2" id="anndtls" class="dtls">text2</a>
    </li>
    <li>    
        <a href="#Tab3" class="dtls">text3</a>
    </li>
    <li>    
        <a href="#Tab4" id="imgsdtls" class="dtls">text4</a>
    </li>
    <li>    
        <a href="#Tab5" id="movieMakingdtls" class="dtls">text5</a>
    </li>
    <li>    
        <a href="#Tab6" id="tradeInfodtls" class="dtls">text6</a>
    </li>
</ul>

これで、更新後もアクティブな状態になるようにタブを選択したいと思います。前もって感謝します。

ドキュメント準備中$("#tabs").tabs();

Cookie を使用せずに必要な出力を取得したいと考えています。一部のクラスを使用して取得することはできますか?

4

5 に答える 5

1

@gveeが言うように、私も使用window.location.hashが最善の方法だと思います。このリンク
を参照してください。

HTML: 

<a href="javascript:location.reload();">Reload page</a>
<div id="tabs">
<ul id="ulid" class="tabs">
    <li> 
        <a href="#Tab1" id="newsdtls" class="dtls">Text 1</a>
    </li>
    <li>    
        <a href="#Tab2" id="anndtls" class="dtls">Text 2</a>
    </li>
    <li>    
        <a href="#Tab3" class="dtls">Text 3</a>
    </li>
    <li>    
        <a href="#Tab4" id="imgsdtls" class="dtls">Text 4</a>
    </li>
    <li>    
        <a href="#Tab5" id="movieMakingdtls" class="dtls">Text 5</a>
    </li>
    <li>    
        <a href="#Tab6" id="tradeInfodtls" class="dtls">Text 6</a>
    </li>
</ul>
<div id="Tab1">Content 1</div>
<div id="Tab2">Content 2</div>
<div id="Tab3">Content 3</div>
<div id="Tab4">Content 4</div>
<div id="Tab5">Content 5</div>
<div id="Tab6">Content 6</div>
</div>

Javascript: 

$("#tabs").tabs({
    create: function(event, ui){
        $(this).tabs({'select': $(this).find("ul").index($(this).find('a[href="' + window.location.hash + '"]').parent())});
    },
    activate: function(event, ui){
        window.location.hash = $(ui.newTab[0]).find('a[href^="#Tab"]').attr("href");
    }
});
于 2013-08-05T13:35:27.517 に答える
1

これには URL に依存する必要があります。backbone.js ルーティングのような優れたフレームワークや、history.js のようなプラグインさえあります。

しかし、このプラグインがなければ、URL からハッシュ bang を取得し、それに対応するリストにアクティブなスタイルを適用できます。

そのためには、HTML は次のようなものでなければなりません。

<ul id="ulid" class="">
        <li class="">
            <a href="#tab=one" id="one" class="active">text1</a>
        </li>
        <li>
            <a href="#tab=two" id="two" class="">text2</a>
        </li>
        <li>
            <a href="#tab=three" id="three" class="">text3</a>
        </li>
        <li>
            <a href="#tab=four" id="four" class="">text4</a>
        </li>
        <li>
            <a href="#tab=five" id="five" class="">text5</a>
        </li>
        <li>
            <a href="#tab=six" id="six"  class="">text6</a>
        </li>
    </ul>

アクティブなクラス css の場所:.active{background-color: red;}

ハッシュバンを取得するための短いアドオンコードは次のとおりです。

function parseHashBangArgs(aURL) {

aURL = aURL || window.location.href;

var vars = {};
var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');

for(var i = 0; i < hashes.length; i++) {
   var hash = hashes[i].split('=');

   if(hash.length > 1) {
       vars[hash[0]] = hash[1];
   } else {
      vars[hash[0]] = null;
   }      
}

return vars;
}

次に、ページの読み込み時にこのコードを実行できます

$('ul#ulid li a').click(function(){
    $('li a').removeClass('active');
    $(this).addClass('active');
});

var selectedTab = parseHashBangArgs(window.location.href).tab;
if(selectedTab){
    $('li a').removeClass('active');
    $('#'+selectedTab).addClass('active');
}

そして完成！

于 2013-08-05T13:41:37.310 に答える
0 
       in
                $(document).ready(function() {
                    active = $(this).attr('id');
                    //contains the id of the selected tab
                    $.cookie('active', active);
                    //place that id in cookie
                })
                $(window).load(function() {//after the page refresh
                    var a = $.cookie('active');
                    //get the value from cookie
                    $('#' + a).trigger('click');
                    //Earlier it doesn/t display the list corresponding to the selected tab after page refresh because it doesn't detect click event.So,generate a click event using "trigger".It's working fine now.Thankyou for all who tried for my code
                });
于 2013-08-08T12:27:11.740 に答える
0

HTML5 History API を試すか、location.hash を使用して選択したタブを保存します。

于 2013-08-05T12:59:27.700 に答える
0

URL ハッシュ値を取得し、href一致する項目を見つけます。

// Grab URL hash
var _hash = window.location.hash;

// Get the index of the matching tab
var tabIndex = $('#tabs a[href='+_hash+']').parent().index();

// Show the tab based on index.
$('#tabs').tabs('select', tabIndex);
于 2013-08-05T12:56:28.893 に答える