我一直在尝试设置页面的活动标签。 很奇怪,因为我可以手动设置活动标签,如下所示:

<div class="tabs">
        <ul class="tab-links">
            <li id="t1" class="active"><a href="#tab1">TAB</a></li>  //setting it here works
            <li id="t2"><a href="#tab2">TAB</a></li>
            <li id="t3"><a href="#tab3">TAB</a></li>
            <li id="t4"><a href="#tab4">TAB</a></li>
            <li id="t5"><a href="#tab5">TAB</a></li>
            <li id="t6"><a href="#tab6">TAB</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab1.html");    ?>
            </div>
            <div id="tab2" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab2.html");    ?>
            </div>
            <div id="tab3" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab3.php");    ?>
            </div>
            <div id="tab4" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab4.php");    ?>
            </div>
            <div id="tab5" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab5.html");    ?>
            </div>
            <div id="tab6" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab6.html");    ?>
            </div>
        </div>

但是,当我尝试像这样进行设置时,没有任何反应:

<script language="javascript" type="text/javascript">

    //setting the tabIndex to the stored value.
    $(".tab-links").tabs({active: tabIndex}); //need to change this somehow
    var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
    console.log("local storage value of tabIndex parseInt: " + tabIndex);
    if(tabIndex != null){
        console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
        $(document).on("click", ".tabs > ul > li:nth-child(" + tabIndex + ") a", function(e) {});
        //$(".tabs").tabs({
            //  active: tabIndex 
        //});
    }

    //storing the last tab index before page refresh
    $(document).on("click", ".tab-links a", function(e) {
          $('.active').removeClass('active');
          $(this).parent().addClass('active');
          var curTab = $('.tab-links').find('.active')[0].id;
          console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
          var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
          localStorage.setItem('activeTab', curTabIndex);
    });

</script>

我在这里想念什么吗? 我只需要以某种方式将tabIndex设置为页面刷新时的活动选项卡。

#1楼 票数:1 已采纳

这是除jQuery之外不使用任何jQuery库的一种方法。

我们使用localStorage存储#hash。 刷新页面后,我们检查是否存在哈希,并使用哈希查找使用哈希的链接。

$(function () {
    $(document).on('click', '.tab-links a', function () {
        var link = $(this), 
            listItem = link.parent(), 
            content = $(link.attr('href'));
        // show current link and content
        listItem.add(content).addClass('active');
        // hide other links and contents
        listItem.siblings().add(content.siblings()).removeClass('active');
        // save selected tab e.g. #tab1. #tab2, ...
        localStorage.setItem('activeTab', link.attr('href'));
    });
    // go back to last tab if any
    var activeTab = localStorage.getItem('activeTab'); // ex. #tab1, #tab2, ...
    if (activeTab) {
        $('.tab-links a[href="' + activeTab + '"]').click();
    }
})

确保仅在活动状态下显示内容

 .tab {
     display: none;
 }
 .tab.active {
     display: block;
 }

确保默认情况下第一个选项卡处于活动状态

 <li id="t1" class="active"><a href="#tab1">TAB</a></li>

 <div id="tab1" class="tab active" style="font-family: 'Open Sans', sans-serif;">

#2楼 票数:0

编辑

同样在文档中,它提到如果要在初始化后设置活动选项卡,可以使用

$('.selector').tabs("option", "active", 1)

因此,在您的情况下:

$(".tab-links").tabs("option", "active", tabIndex);

如果我正确阅读了文档 ,则应使用外部div初始化选项卡:

$('.tabs').tabs({active: 1});

另外,看起来tab-content div应该与ul元素处于同一级别。

这是他们使用的示例代码:

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">One</a></li>
    <li><a href="#fragment-2">Two</a></li>
    <li><a href="#fragment-3">Three</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

#3楼 票数:0

我还没有阅读制表符功能的来源的任何文档,因为您没有指定,但是像其他任何东西一样,这很容易破解。 您需要做的就是单击选项卡时将CSS类激活。

以下JQuery代码可能适合您:

$('ul.tab-links li').on('click', function(){
    $('li.active').removeClass('active'); // to remove the current active tab
    $(this).addClass('active'); // add active class to the clicked tab
});

  ask by kkmoslehpour translate from so

未解决问题?本站智能推荐:

2回复

使用JavaScript设置标签顺序

我有一个具有多种形式的页面。 我正在使用Mootools滑动标签,因此菜单上的每个按钮都滑到下一个表单。 从技术上讲,同一HTML页面上有3种形式。 在http://creativepony.com/archive/demos/sliding-tabs/中查看该技术的示例 我的问题是
1回复

Javascript标签未正常运行

我有三个选项卡,其活动/非活动类来自javascript代码。 但是当我点击第二个或第三个选项卡时,它会移动到第一个选项卡。 看我的代码 另见html相同 当我单击second或third选项卡时,它再次移动到第一个选项卡。 UPDATE 回发页面加载代码: -
1回复

选项卡不活动时Javascript不起作用

因此,我在这里有一个代码,当我在活动浏览器选项卡中查看它时,它可以很好地工作。 但是,一旦我最小化浏览器或在浏览器的其他选项卡之间切换(即chrome),代码就会开始出现问题。 这是下面的代码: 请不要因为我一直在这个站点上寻找答案,但是我发现的大多数都是基于JQuery的解决方案。
2回复

Javascript将活动标签置于粗体

嗨,我正在尝试将活动标签设为粗体。 我想我缺少了一些东西。 所以这是我的标签: 我希望当我单击“ tab1”时,它变为粗体并显示与其对应的文本。 当我单击“ tab2”时,它会变为粗体,而其他人则不会。 等等 所以这是我做的: document.getEl
3回复

Javascript菜单设置类为活动状态

几天前我才刚接触Javascript,HTML和CSS,所以我对此很陌生。...无论如何,我正在尝试使用Twitter的Bootstrap创建垂直菜单。 我设法使菜单很好,但是我想使它正确,因此当您单击菜单上的按钮时,它将使该按钮具有“活动”类,我已尽力做到了,它能正常工作,但是只有当您依次选
3回复

使用javascript将选项卡或菜单选项显示为活动元素

这不是一个jQuery问题。 我没有在我的菜单中使用<anchor>或list 。 当菜单(选项卡)处于活动状态时,我希望菜单(选项卡)项目的颜色不同。 我尝试过使用CSS :active和:selection ,但它们不起作用。 我在菜单的<p>标签内使用<
1回复

活动标签上的html中的搜索元素(javascript)

我正在尝试创建自己的Google chrome扩展,以搜索html中的某些信息。重要提示:在活动标签中搜索。 我的popup.js的示例 我的manifest.json文件: 我的popup.html看起来像: 我没有任何结果。 有什么方法可以使用chrome.t
7回复

如何使用 javascript 更改活动的引导程序选项卡

我试图更改活动选项卡,但未能正确使用 javascript onclick 元素。 这是代码: 我如何才能使用按钮将活动选项卡更改为其关联的 ID? 请指教。 祝你有美好的一天!