Question

<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的情况下获得所需的输出。是否有可能通过使用某些类？

Answer 1

就像@gvee所说，我也认为使用window.location.hash是最好的方式请参阅this链接。

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

Answer 2

你需要依赖url这个，我们有很棒的框架，比如backbone.js路由甚至是像history.js这样的插件

但是如果没有这个插件，你可以从网址获取哈希爆炸并应用列表的活动样式对应它。

为了做到这一点，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');
}

它完成了！

Answer 3

抓取网址哈希值，然后找到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);

Answer 4

尝试HTML5 History API或使用location.hash存储所选标签。

Answer 5

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

如何在不使用cookie的情况下刷新页面后突出显示所选标签？

5 个答案: