使用 tabber.js 时是否可以更改选项卡式内容中选项卡的标题？答案

【问题标题】：Is it possible to change the title of a tab in a tabbed content while using tabber.js?使用 tabber.js 时是否可以更改选项卡式内容中选项卡的标题？
【发布时间】：2011-03-19 19:41:18
【问题描述】：

我正在使用 tabber.js 脚本创建选项卡式内容，我想在 onclick 事件期间更改选项卡的标题。

我试过这样设置标题， document.getElementById("mytab1").title = "新标题";

但这不起作用..还有其他想法吗？

谢谢

【问题讨论】：

标签： javascript

【解决方案1】：

这个（未经测试的）函数显示了方法。从选项卡开始，将其兄弟元素遍历到具有类“tabbertab”的父计数元素，直到到达具有类“tabbernav”的元素，然后具有索引计数的该选项卡的子元素就是您想要的选项卡标题。

function changeTabberTitle (tab, newTitle) {
  var idx = 0;
  while (tab) {
    if ((tab = tab.previousSibling) && (tab.className || '').match (/\btabbertab\b/))
      idx++;
    else if ((tab.className || '').match (/\btabbernav\b/)) {
      tab = tab.children[idx];
      tab && (tab.innerHTML = newTitle);
      return !!tab; 
    }
  }  
  return false;
}

函数成功返回true，否则返回false；

【讨论】：

【解决方案2】：

编辑：抱歉，我最初将您的问题解释为更改选项卡顶部的文本，而不是标题属性。

碰巧的是，如果您想更改标题属性，那么您使用的代码实际上确实有效，正如 jsfiddle 所证明的那样。

如果此代码无法在您的网站上运行，则可能有两个错误来源...

您引用的元素 ID 不正确。
您的代码在 DOM 完全加载之前执行（更具体地说，在标签加载之前）。

如果错误来自 #1，那么您只需更改 document.getElementById('id') 以使其匹配。

如果错误来自 #2，那么您有两个选项可以使用纯 JavaScript 来解决此问题。您的第一个选择是将处理 DOM 的任何代码包装到一个函数中，然后在窗口完全加载后调用该函数：

window.onload = coolStuff();
function coolStuff() {
    document.getElementById("mytab1").title = "New Title";
}

执行代码的另一个选项是将脚本包含在 html 页面的 <body> 标记的底部。这将确保在调用您的脚本时浏览器已计算出整个 DOM。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cool page</title>
    <link rel="stylesheet" href="mycss">
</head>
<body>
    <div id="mytab1">My cool tab</div>
    <div id="othercoolstuff">Totally cool stuff here</div>
    <script src="script.js"></script>
</body>
</html>

【讨论】：

mytab1 是选项卡的 ID，而不是标题。标题是选项卡的属性。选项卡定义如下，
@Kdude 抱歉，完全误读了您的问题。我修正了我的答案，我确定我找出了错误所在（我打赌它是问题#2，在 DOM 准备好之前调用你的代码）。