使用JavaScript禁用活动标签按钮

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (131)

我有一个标签脚本,在同一个地方有四个视频。我想禁用当前的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>
提问于
用户回答回答于

只需编写一个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>
用户回答回答于

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

//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>

扫码关注云+社区

领取腾讯云代金券