使用JavaScript禁用活动标签页按钮

Question

我有一个标签脚本，该脚本在同一位置包含四个视频。我想禁用当前的onload按钮“ 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&controls=0&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&controls=0&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&controls=0&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&controls=0&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>

Answer 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&controls=0&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&controls=0&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&controls=0&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&controls=0&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>

Answer 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&controls=0&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&controls=0&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&controls=0&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&controls=0&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>