如何从活动标签复制文本？

Posted 2021-04-10

我创建了带有三个按钮的标签菜单。传递<div> ID后，我可以复制单个标签的内容。如何获取活动<div>的ID，以便可以通过range.selectNode(document.getElementById(*ID*))传递ID以复制当前活动选项卡的内容？

//  function to copy
function 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>

答案

您可以像CopyToClipboard(GameName)一样在openGame（）中调用函数CopyToClipboard（）并进行更改范围。选择节点为range.selectNode(document.getElementById(GameName)); 在定义“复制到剪贴板”功能时也要传递参数。

另一答案

在此示例中，您要做的就是将活动选项卡ID存储在这些功能范围之外的变量中。