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

You need to rely on the url for this and we have great frameworks like backbone.js routing or even plugins like history.js

But without this plugins u can get the hash bang from the url and apply the active styles for the list corresponds to the it.

In order to do it HTML must be kind of like this,

<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>

Where active class css could be: .active{background-color: red;}

A short add on code for getting hash bang is:

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;
}

Then you can get run this code on page load

$('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');
}

And its done!

于 2013-08-05T13:41:37.310 回答
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 回答
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 回答