使用 JavaScript 禁用活动选项卡按钮答案

【问题标题】：Disable active tab button using JavaScript使用 JavaScript 禁用活动选项卡按钮
【发布时间】：2018-06-28 18:01:03
【问题描述】：

我有一个标签脚本，在同一位置有四个视频。我想禁用当前的加载按钮“Word”，然后禁用“活动”按钮并启用其余按钮。

例子：

单击 Word - Word 按钮已禁用（所有其他按钮已启用）。
单击 Excel - Excel 按钮已禁用（所有其他按钮已启用）等。

这是布局的图像：

代码如下：

var word = 'https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/S-nHYzK-BVg?rel=0&amp;controls=0&amp;showinfo=0
var excel = 'https://www.microsoft.com/en-us/videoplayer/embed/57a73113-90a7-4134-b4d2-b688665ee9df?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/rwbho0CgEAE?rel=0&amp;controls=0&amp;showinfo=0
var powerpoint = 'https://www.microsoft.com/en-us/videoplayer/embed/98700e07-e32e-4c85-b04f-910750316a5d?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/XF34-Wu6qWU?rel=0&amp;controls=0&amp;showinfo=0
var onenote = 'https://www.microsoft.com/en-us/videoplayer/embed/866b3f9f-b86e-471d-a137-a2408b88e545?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; // https://www.youtube.com/embed/_bKiatpaacg?rel=0&amp;controls=0&amp;showinfo=0

var player = document.getElementById('player');

function videoSelect(element) {
  if (element === "word") {
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '"></iframe>'; //<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  }
  if (element === "excel") {
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "powerpoint") {
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "onenote") {
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
}

if (videoSelect) {
  videoSelect.disabled = true;
} else {
  videoSelect.disabled = false;
}

<div class="row">
  <div id="options">
    <button type="button" id="word" onclick="videoSelect(this.id)">Word</button>
    <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button type="button" id="powerpoint" onclick="videoSelect(this.id)">
		PowerPoint</button>
    <button type="button" id="onenote" onclick="videoSelect(this.id)">
		OneNote</button>
  </div>
  <div id="player">
    <iframe width="560" height="315" src="https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us"></iframe>
  </div>
</div>

【问题讨论】：

if (videoSelect) 只是检查该变量/函数是否存在并且松散地评估为真。很确定这不是你想要的。
感谢@Devon 的更新，我还在学习 JS，所以解释这很有帮助！

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只需写一个function，它会根据活动按钮改变标签按钮的.disabled状态：

// gather the tab buttons
var tabButtons = document.querySelectorAll('#options > button');

function enableTabButton(buttonId) {
    // iterate over them and enable all of them, 
    // except the one with the given id
    tabButtons.forEach(function(btn) {
        btn.disabled = btn.id === buttonId;
    });
}

var word = 'https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/S-nHYzK-BVg?rel=0&amp;controls=0&amp;showinfo=0
var excel = 'https://www.microsoft.com/en-us/videoplayer/embed/57a73113-90a7-4134-b4d2-b688665ee9df?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/rwbho0CgEAE?rel=0&amp;controls=0&amp;showinfo=0
var powerpoint = 'https://www.microsoft.com/en-us/videoplayer/embed/98700e07-e32e-4c85-b04f-910750316a5d?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/XF34-Wu6qWU?rel=0&amp;controls=0&amp;showinfo=0
var onenote = 'https://www.microsoft.com/en-us/videoplayer/embed/866b3f9f-b86e-471d-a137-a2408b88e545?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; // https://www.youtube.com/embed/_bKiatpaacg?rel=0&amp;controls=0&amp;showinfo=0

// gather the tab buttons
var tabButtons = document.querySelectorAll('#options > button');

function enableTabButton(buttonId) {
  // iterate over them and enable all of them, 
  // except the one with the given id
  tabButtons.forEach(function(btn) {
    btn.disabled = btn.id === buttonId;
  });
}

// set the initially enabled button
enableTabButton('word');

var player = document.getElementById('player');

function videoSelect(element) {
  enableTabButton(element);

  if (element === "word") {
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '"></iframe>'; //<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  }
  if (element === "excel") {
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "powerpoint") {
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "onenote") {
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
}

<div class="row">
  <div id="options">
    <button type="button" id="word" onclick="videoSelect(this.id)">Word</button>
    <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button type="button" id="powerpoint" onclick="videoSelect(this.id)">
		PowerPoint</button>
    <button type="button" id="onenote" onclick="videoSelect(this.id)">
		OneNote</button>
  </div>
  <div id="player">
    <iframe width="560" height="315" src="https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us"></iframe>
  </div>
</div>

【讨论】：

非常感谢理查德！我今天学到了新东西！效果很好，我什至添加了一个 btn.style.background 属性来改变颜色。
谢谢你！慢慢尝试学习 JavaScript，up'd + 被选为最佳答案。

【解决方案2】：

您可以启用所有点击并禁用点击

//Get all the buttons
var buttons = document.querySelectorAll('#options button');

//Enable All
buttons.forEach(function(button) {
    button.disabled = false;
});

//Disable the clicked one
document.getElementById(element).disabled = true;

NTOE：您可以通过添加 disabled 属性来禁用 HTML 中的默认按钮。

var word = 'https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/S-nHYzK-BVg?rel=0&amp;controls=0&amp;showinfo=0
var excel = 'https://www.microsoft.com/en-us/videoplayer/embed/57a73113-90a7-4134-b4d2-b688665ee9df?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/rwbho0CgEAE?rel=0&amp;controls=0&amp;showinfo=0
var powerpoint = 'https://www.microsoft.com/en-us/videoplayer/embed/98700e07-e32e-4c85-b04f-910750316a5d?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/XF34-Wu6qWU?rel=0&amp;controls=0&amp;showinfo=0
var onenote = 'https://www.microsoft.com/en-us/videoplayer/embed/866b3f9f-b86e-471d-a137-a2408b88e545?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; // https://www.youtube.com/embed/_bKiatpaacg?rel=0&amp;controls=0&amp;showinfo=0

var player = document.getElementById('player');

function videoSelect(element) {
  var buttons = document.querySelectorAll('#options button');

  buttons.forEach(function(button) {
    button.disabled = false;
  });

  document.getElementById(element).disabled = true;

  if (element === "word") {
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '"></iframe>'; //<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  }
  if (element === "excel") {
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "powerpoint") {
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "onenote") {
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
}

<div class="row">
  <div id="options">
    <button type="button" id="word" onclick="videoSelect(this.id)" disabled>Word</button>
    <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button type="button" id="powerpoint" onclick="videoSelect(this.id)">
		PowerPoint</button>
    <button type="button" id="onenote" onclick="videoSelect(this.id)">
		OneNote</button>
  </div>
  <div id="player">
    <iframe width="560" height="315" src="https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us"></iframe>
  </div>
</div>

【讨论】：