时间戳

首页 > 解决方案 > 使用 JavaScript 显示和隐藏内容

javascript - 使用 JavaScript 显示和隐藏内容

问题描述

我正在我的个人页面上练习 JavaScript，但我在使用 #fourth-page (Portfolio) 时遇到了问题。基本上我想要的是，当我点击网页设计时，它会显示 class="tab1-content" 下的内容，如果我点击 Games，它会显示与该 div 相关的图片（在 class="tab3-content 下），如果那样的话有道理。我附上了一个JSFiddle（有些图片丢失了，因为我不知道如何上传图片。

我的逻辑很长，所以更好的逻辑也将不胜感激。

这是我的逻辑：

请注意，我有一个名为“current-tab”的 ID，它将选定的选项卡变为绿色。基本上每次点击时，我都会从每个选项卡元素中删除该 ID，我还通过将 tab1-content tab2-content tab3-content 和 tab4-content 的显示设置为 none 来删除每个选项卡内容。然后我把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");
}

标签： javascripthtmlcssdom

解决方案

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

到目前为止，最简单和最简单的是使用 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>

没有 Javascript 的自定义 CSSradio 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>

还有很多其他方法希望对您有所帮助。

推荐阅读