Question

我正在个人页面上练习JavaScript，但是在＃fourth-page（投资组合）方面遇到了麻烦。基本上我想要的是，当我单击Web Design时，它显示了class =“ tab1-content”下的内容，如果我单击Games，它显示了与该div相关的图片（在class =“ tab3-content下），如果那很有道理。我附上了JSFiddle（有些照片丢失了，原因是idk如何上传照片。

我的逻辑很长，因此也希望更好的逻辑。

这是我的逻辑：

请注意，我有一个名为“ current-tab”的ID，该ID将所选标签变为绿色。基本上，每次单击时，我都会从每个选项卡元素中删除该ID，也通过将tab1-content，tab2-content，tab3-content和tab4-content的显示设置为无来删除所有选项卡的内容。然后，将ID放在应该的位置。但是我不知道如何显示所需的正确标签内容。请帮忙吗？

我敢肯定有更好的方法做到这一点

var tab1 = document.querySelector("#homepage #fourth-page .portfolio-container .tab1");
var tab2 = document.querySelector("#homepage #fourth-page .portfolio-container .tab2");
var tab3 = document.querySelector("#homepage #fourth-page .portfolio-container .tab3");
var tab4 = document.querySelector("#homepage #fourth-page .portfolio-container .tab4");
var tabs = document.querySelector("#homepage #fourth-page .portfolio-container .tabs");
var tabLinks = tabs.getElementsByTagName("a"); // Array
var temp = document.querySelector("#homepage #fourth-page .portfolio .tab-content-wrap");
var tabContents = temp.getElementsByClassName("tab-content");

// Initially, Web Design is green

console.log("testing");

tab1.setAttribute("id", "current-tab");

// If I click one, hide the other ones

//  Adding individual listening events
tab1.addEventListener("click", showContent);
tab2.addEventListener("click", showContent);
tab3.addEventListener("click", showContent);
tab4.addEventListener("click", showContent);

function showContent() {
  console.log("executing function");
  // give it #current tab, remove previous
  // display its content, remove other one

  for (let i = tabLinks.length - 1; i >= 0; i--) {
    tabLinks[i].removeAttribute("id");
    tabContents[i].style.cssText = "display: none";
  }
  this.setAttribute("id", "current-tab");
}

Answer 1

这可以根据您的需要以多种方式完成。

到目前为止，最简单最简单的方法是使用Bootstrap选项卡，您可以在下面的链接中看到这些选项卡： https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

如果您想自己编写代码，但是我可以提出建议

使用类而不是ID -从元素中添加和删除类比更改ID容易得多（请参见示例……它很粗略，但可以使您失望）正确的路径）

function viewMagicBox(boxRef) {
  var items = document.getElementsByClassName("magic-box active");
  var itemCount = items.length;
  for (var i = 0; i < itemCount; i++) {
    items[i].classList.remove("active");
  }
  document.getElementById(boxRef + "-content").classList.add("active");
}

.active {
  display: block !important;
}

.magic-box {
  display: none;
}

<a onclick="viewMagicBox('box1')">Box1</a>&nbsp;<a onclick="viewMagicBox('box2')">Box2</a>&nbsp;<a onclick="viewMagicBox('box3')">Box3</a>&nbsp;<a onclick="viewMagicBox('box4')">Box4</a>
<div id="box1-content" class="magic-box">This is what is displayed in <span style="color:red;">Box 1</span></div>
<div id="box2-content" class="magic-box">This is what is displayed in <span style="color:blue;">Box 2</span></div>
<div id="box3-content" class="magic-box">This is what is displayed in <span style="color:green;">Box 3</span></div>
<div id="box4-content" class="magic-box">This is what is displayed in <span style="color:gold;">Box 4</span></div>

不使用Java脚本的自定义CSS -还有一个鲜为人知的选择，使用radio button尤其方便，如果试图在不允许活动脚本的站点中显示选项卡式内容。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  padding: 10px;
  float: left;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  cursor: pointer;
}

.tabheader {
  padding: 5px;
  background-color: #394620;
  margin-top: 5px;
  margin-bottom: 0;
  color: white;
}

.tab-content {
  display: none;
  background-color: white;
}

.tabheader:hover {
  background-color: grey;
  border: #394620 4px solid;
  color: #394620;
  margin-bottom: -4;
}

input:checked~.tab-content {
  display: block;
}

<div role="tabpanel">
  <!-- Nav tabs -->

  <ul role="tablist">
    <li role="presentation"><label class="tabheader" for="magicTab1">Magic Tab 1</label></li>

    <li role="presentation"><label class="tabheader" for="magicTab2">Magic Tab 2</label></li>

    <li role="presentation"><label class="tabheader" for="magicTab3">Magic Tab 3</label></li>

    <li role="presentation"><label class="tabheader" for="magicTab4">Magic Tab 4</label></li>
  </ul>
  <!-- TAB START -->
  <div>
    <input type="radio" id="magicTab1" checked name="my_tabs">
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel">
        <h2>Tab 1 is the First</h2>
        <p>This is the first tab content</p>
      </div>
    </div>
  </div>
  <div>
    <input type="radio" id="magicTab2" name="my_tabs">
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel">
        <h2>Tab 2 is the Second</h2>
        <p>This is the second tab content</p>
      </div>
    </div>
  </div>
  <div>
    <input type="radio" id="magicTab3" name="my_tabs">
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel">
        <h2>Tab 3 is the Third</h2>
        <p>This is the third tab content</p>
      </div>
    </div>
  </div>
  <div>
    <input type="radio" id="magicTab4" name="my_tabs">
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel">
        <h2>Tab 4 is the Fourth</h2>
        <p>This is the fourth tab content</p>
      </div>
    </div>
  </div>
  <!-- TABS END --->
</div>

再次有很多其他方式希望对您有所帮助。

使用JavaScript显示和隐藏内容

1 个答案: