如何使用 javascript 将内容从页面上的其他位置移动到选项卡中？

Question

我希望通过 javascript 或任何其他方式将页面上的一些内容移动到页面上的一组标签中。我无法编辑此代码存在的页面上的 WHERE，但我可以在字段上设置 Pre/Post HTML，从而给它一个 class 或一个 ID 来搞乱。

如果你不想去那里，这里是代码：

function openTab(evt, tabName) {
  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(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #0090bf;
  color: #fff;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

```
<!-- I can edit this section as needed. -->
<section class="panel panel-persondetails">
  <div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'tab1')">Tab Name 1</button>
    <button class="tablinks" onclick="openTab(event, 'tab2')">Tab Name 2</button>
    <button class="tablinks" onclick="openTab(event, 'tab3')">Tab Name 3</button>
  </div>

  <div id="tab1" class="tabcontent" style="display: block;">
    <div>
      replace me with stuff 1
    </div>
  </div>

  <div id="tab2" class="tabcontent">
    <div>
      replace me with stuff 2
    </div>
  </div>

  <div id="tab3" class="tabcontent">
    <div>
      replace me with stuff 3
    </div>
  </div>
</section>

<!-- The following is elsewhere on the page and I can't move it. I can add pre/post HTML which is how I'd wrap it in a div and give it an ID or class to hopefully use js to show it in the tabs above instead. -->
<div id="content-tab-1">I want this in tab1.</div>

<div id="content-tab-2">I want this in tab2.</div>

<div id="content-tab-3">I want this in tab3.</div>

JS 专家在哪里隔离并渴望解决问题？谢谢大家！

Answer 1

你可以这样做

var newContent = $("#content-tab-1]").detach();
$("#tab1").find("div").first().html(newContent);

显然，您必须将它放在任何需要的地方，并展开选项卡 2 和 3。

Answer 2

我编辑了你的 JSFiddle，我认为我做了你要求的事情。最初，选项卡下方的内容设置为表示 "I want this in tab1" 的元素的内容。之后，每次切换到不同的选项卡时，程序都会简单地获取相应的内容。这是 JSFiddle 的 link：

Tab Switching Demo

// START WITH THE CONTENT AS THE FIRST TAB ITEM
var contents = document.getElementById("content-tab1").innerHTML;
document.getElementById("tabcontent").innerHTML = contents;
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  // MAKE ALL OF THE TABS LOOK INACTIVE
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  //CHANGE THE DISPLAY AND CSS PROPERTIES OF THE CLICKED TAB
  var contents = document.getElementById("content-" + tabName).innerHTML;
  console.log(contents);
  document.getElementById("tabcontent").innerHTML = contents;
  evt.currentTarget.className += " active";
  
  console.log(evt.currentTarget.id);
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #0090bf;
  color: #fff;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<!-- I can edit this section as needed. -->
<section class="panel panel-persondetails">
  <div class="tab">
    <button id="tab1" class="tablinks active" onclick="openTab(event, 'tab1')">Tab Name 1</button>
    <button id="tab2" class="tablinks" onclick="openTab(event, 'tab2')">Tab Name 2</button>
    <button id="tab3" class="tablinks" onclick="openTab(event, 'tab3')">Tab Name 3</button>
  </div>

  <div class="tabcontent" style="display: block;">
    <div id="tabcontent">
      replace me with stuff 1
    </div>
  </div>
</section>
<br>

<!-- The following is elsewhere on the page and I can't move it. I can add pre/post HTML which is how I'd wrap it in a div and give it an ID or class to hopefully use js to show it in the tabs above instead. -->
<div id="content-tab1">I want this in tab1.</div>

<div id="content-tab2">I want this in tab2.</div>

<div id="content-tab3">I want this in tab3.</div>

Answer 3

var tabcontent = document.getElementsByClassName("tabcontent");
var tablinks = document.getElementsByClassName("tablinks");

insertToTab(1);

console.log('tablinks ', tablinks);

for (let i = 0; i < tablinks.length; i++) {
  tablinks[i].addEventListener('click', bindClick2(i))
}

function bindClick2(i) {
  return function() {
    insertToTab(i + 1);

    for (j = 0; j < tabcontent.length; j++) {
      tabcontent[j].style.display = "none";
    }

    for (j = 0; j < tablinks.length; j++) {
      tablinks[j].className = tablinks[j].className.replace(" active", "");
    }

    var tabName = 'tab' + (+i + 1);
    document.getElementById(tabName).style.display = "block";
    this.className += " active";
  }
}

function insertToTab(i) {
  var currContentTab = document.getElementById("content-tab-" + i);
  var currTabcontent = document.getElementById("tab" + i)

  currTabcontent.innerText = currContentTab.innerText;
}

/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #0090bf;
  color: #fff;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<section class="panel panel-persondetails">
  <div class="tab">
    <button class="tablinks active">Tab Name 1</button>
    <button class="tablinks">Tab Name 2</button>
    <button class="tablinks">Tab Name 3</button>
  </div>

  <div id="tab1" class="tabcontent" style="display: block;">
    <div>
      replace me with stuff 1
    </div>
  </div>

  <div id="tab2" class="tabcontent">
    <div>
      replace me with stuff 2
    </div>
  </div>

  <div id="tab3" class="tabcontent">
    <div>
      replace me with stuff 3
    </div>
  </div>
</section>

<div id="content-tab-1">I want this in tab1.</div>
<div id="content-tab-2">I want this in tab2.</div>
<div id="content-tab-3">I want this in tab3.</div>

如何使用 javascript 将内容从页面上的其他位置移动到选项卡中？

How can I move content into tabs from elsewhere on the page using javascript?

html

javascript

jquery

tabs