我創建了一個帶有三個按鈕的選項卡菜單。我可以在傳遞 id 后復制單個選項卡內容<div>。如何獲取活動選項卡的 ID <div>，以便我可以通過該 ID 來range.selectNode(document.getElementById(*ID*))復制當前活動選項卡的內容？// function to copyfunction CopyToClipboard(){ var range = document.createRange(); range.selectNode(document.getElementById("Cricket")); window.getSelection().removeAllRanges(); /* clear current selection*/ window.getSelection().addRange(range); /* to select text*/ document.execCommand("copy"); window.getSelection().removeAllRanges();/* to deselect*/}function openGame(evt, GameName){ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(GameName).style.display = "block"; evt.currentTarget.className += " active";}<button onclick="CopyToClipboard()" >Copy</button><p>Click to copy:</p><div class="tab"> <button class="tablinks" onclick="openGame(event, 'Cricket')">Cricket</button> <button class="tablinks" onclick="openGame(event, 'Football')">Football</button> <button class="tablinks" onclick="openGame(event, 'Chess')">Chess</button></div> <div class="container" id="frame"> <div id="Cricket" class="tabcontent"> <p>Cricket</p> </div> <div id="Football" class="tabcontent"> <p>Football</p> </div> <div id="Chess" class="tabcontent"> <p>Chess</p> </div></div>
4 回答
呼啦一陣風
TA貢獻1802條經驗 獲得超6個贊
在這個例子中，您所要做的就是將活動選項卡 ID 存儲在這些函數范圍之外的變量中。
// function to copy
var activeTabId = 'Cricket'; // Or whatever your default tab is
function CopyToClipboard(){
var range = document.createRange();
//range.selectNode(document.getElementById("Cricket"));
range.selectNode(document.getElementById(activeTabId)); // here you use the variable
window.getSelection().removeAllRanges(); /* clear current selection*/
window.getSelection().addRange(range); /* to select text*/
document.execCommand("copy");
window.getSelection().removeAllRanges();/* to deselect*/
}
function openGame(evt, GameName){
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(GameName).style.display = "block";
evt.currentTarget.className += " active";
activeTabId = GameName; // here you assign the active tab value
}
還。您可能希望提前獲取選項卡的引用 - 這樣您就不必在每次執行兩個函數時都搜索 DOM。
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
您可以簡單地將 CopyToClipboard 函數調整為：
我使用 querySelector 獲取活動 tablink 元素，然后獲取它的內部文本，即 tabcontent id 之一。
// function to copy
function CopyToClipboard(){
var activeTabId = document.querySelector('.tablinks.active').innerText;
var range = document.createRange();
range.selectNode(document.getElementById(activeTabId));
window.getSelection().removeAllRanges(); /* clear current selection*/
window.getSelection().addRange(range); /* to select text*/
document.execCommand("copy");
window.getSelection().removeAllRanges();/* to deselect*/
}
qq_花開花謝_0
TA貢獻1835條經驗 獲得超7個贊
問題：“如何獲取活躍用戶的ID <div>？”
要回答這個具體問題：
活動按鈕具有“tablinks active”類，并且它的innerHTML 包含與活動div 的ID 相同的文本。
此函數將從活動按鈕中檢索與 div ID 匹配的文本：
// return the active div's ID
function activeDivId () {
let activeButtons =
document.getElementsByClassName('tablinks active');
if (activeButtons.length === 0) {
return null;
}
const activeButton = activeButtons[0];
return activeButton.innerHTML;
}
讓它變得更好
雖然這嚴格地回答了問題，但這并不是最有效的方法，并且有多種方法可以使代碼變得更好。
以下原則可以指導改進：
始終將應用程序的狀態存儲在 DOM 之外。
為了提高速度，請盡量減少對 DOM 的查詢和操作。
為了避免命名沖突，請將變量和函數名稱括在對象中。
for...of當或for...in足夠時，避免使用索引 for 循環。
這是該游戲的修改版本，遵循以下原則：
// put game inside an object to avoid global name conflicts
const myGame = {
// static parts of the DOM
tabcontent: document.getElementsByClassName('tabcontent'),
tablinks: document.getElementsByClassName('tablinks'),
// name of currently active game
activeGame: null,
// div of active game content
activeTabContent: null,
// button of active game
activeTabLink: null,
// open the game
openGame: function (button, gameName) {
const { tablinks, tabcontent } = myGame;
// clear former active game
if (myGame.activeGame) {
myGame.activeTabLink.classList.remove('active');
myGame.activeTabContent.style.display = 'none';
} else {
// clear all games
for (const tl of tablinks) {
tl.classList.remove('active');
}
for (const tc of tabcontent) {
tc.style.display = 'none';
}
}
// activate new game
myGame.activeTabLink = button;
myGame.activeGame = gameName;
myGame.activeTabContent = document.getElementById(gameName);
myGame.activeTabContent.style.display = 'block';
myGame.activeTabLink.classList.add('active');
},
// copy contents of active game
copyActiveToClipboard: function () {
const range = document.createRange();
range.selectNode(myGame.activeTabContent);
window.getSelection().removeAllRanges(); /* clear current selection*/
window.getSelection().addRange(range); /* to select text*/
document.execCommand("copy");
window.getSelection().removeAllRanges();/* to deselect*/
}
};
/* highlight active button */
.tablinks.active {
color: blue;
}
<p>Copy contents of active game to clipboard:</p>
<button onclick="myGame.copyActiveToClipboard()">Copy</button>
<p>Click to select game:</p>
<div class="tab">
<button class="tablinks" onclick="myGame.openGame(this, 'Cricket')">Cricket
</button>
<button class="tablinks" onclick="myGame.openGame(this, 'Football')">Football
</button>
<button class="tablinks" onclick="myGame.openGame(this, 'Chess')">Chess
</button>
</div>
<div class="container" id="frame">
<div id="Cricket" class="tabcontent">
<p>Cricket</p>
</div>
<div id="Football" class="tabcontent">
<p>Football</p>
</div>
<div id="Chess" class="tabcontent">
<p>Chess</p>
</div>
</div>
HUX布斯
TA貢獻1876條經驗 獲得超6個贊
您可以像調用 openGame() 中的 CopyToClipboard() 函數一樣CopyToClipboard(GameName)，更改 range.select 節點，以便 range.selectNode(document.getElementById(GameName));在定義復制到剪貼板函數時也傳遞參數。
- 4 回答
- 0 關注
- 467 瀏覽
添加回答
舉報
0/150
提交
取消