javascript - 使用当前选项卡更改选项卡标题占位符的名称

Question

我已经尝试了一些事情，但显然对编码不够精通，无法自己完成

我在这里设置了一个 jsfiddle - https://jsfiddle.net/7ojfmxn2/17/

我有一个显示选项卡功能来显示下面的选项卡内容，我有一个选项卡的标题文本，我想在每次单击“League Tabs”时将该文本更改为当前选项卡的名称我'我想重命名为 Tab 0 、 Tab 1 、 Tab 2 等，无论何时选择一个，有什么帮助吗？

function show_tab(tab_id) {
  var done = false;
  var counter = 0;
  while (!done) {
    var this_tab_content = document.getElementById("tabcontent" + counter);
    var this_tab = document.getElementById("tab" + counter);
    if (!this_tab_content) {
      done = true;
    } else {
      if (counter == tab_id) {
        this_tab_content.style.display = '';
        this_tab.className = "currenttab";
      } else {
        this_tab_content.style.display = 'none';
        this_tab.className = "";
      }
    }
    counter++;
  }
  location.hash = tab_id;
}

if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0);
}

Answer 1

我不确定这是你要的，但如果你想用选项卡名称替换“League Tabs”，你可以按如下方式操作

1- 为存储标签页眉的范围指定一个 ID，例如 id=tabheader

2- 在设置可见选项卡的代码部分，还设置该范围的内容(id=tabheader 的元素)

这是代码

HTML

...
<div class="myfantasyleague_tabmenu"><span id="tabheader">LEAGUE TABS</span>
....

JS

....
 if (counter == tab_id) {
        this_tab_content.style.display = '';
        this_tab.className = "currenttab";
        var tabheader = document.getElementById("tabheader");
        tabheader.innerHTML="tab " + counter;
      }
...

查看更新的 fiddle https://jsfiddle.net/7ojfmxn2/30/

编辑

如果您希望标题 LEAGUE TABS 在开头显示，您必须以未选择任何选项卡的方式注释您的初始代码。

/*
if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0);
}
*/

编辑 2为避免显示您可以使用的所有选项卡

         show_tab(-1);

代替

        show_tab(0);

参见 fiddle https://jsfiddle.net/7ojfmxn2/50/

编辑 3

如果您想在页面加载时看到“主”选项卡名称，无论如何加载选项卡 0，您可以

1- 更改 show_tab，添加一个输入参数。此 bool 参数确定要显示的内容(主选项卡名称或显示的选项卡名称)，如下所示

 function show_tab(tab_id, show_main_tab_name) {
   .....
   //here is where the tab title is displaied 
   var tabheader = document.getElementById("tabheader");
    if(show_main_tab_name){
        tabheader.innerHTML="LEAGUE TABS";
    }
    else {
       tabheader.innerHTML="tab " + counter;
    }
    ....

2- 在参数设置为 true 的情况下调用初始化显示选项卡 (我把你原来的功能)

if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0,true);
}

看我的新 fiddle https://jsfiddle.net/7ojfmxn2/55/