Отображение и скрытие контента с использованием JavaScript

Question

Я практикую JavaScript на своей личной странице, и у меня возникают проблемы с # четвертой страницей (портфолио). По сути, я хочу, чтобы, когда я нажимал на Веб-дизайн, он отображал вещи в class = "tab1-content", если я нажимал на Games, он отображал фотографии, связанные с этим div (под class = "tab3-content), если это Имеет смысл. Я прикрепил JSFiddle (некоторые картинки отсутствуют, потому что idk загружает картинки.

Моя логика довольно длинная, поэтому лучше бы оценить и лучшую.

Вот моя логика:

обратите внимание, что у меня есть идентификатор с именем "current-tab", который окрашивает выбранную вкладку в зеленый цвет. По сути, при каждом нажатии я удаляю этот идентификатор из каждого элемента вкладки, а также удаляю содержимое каждой вкладки, устанавливая для дисплеев tab1-content tab2-content tab3-content и tab4-content ни одно. Затем я поставил удостоверение личности там, где и должно быть. Однако я не могу понять, как отобразить правильное содержание вкладки, которое мне нужно. Пожалуйста, помогите?

Я уверен, что есть лучший способ сделать это

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

Если вы хотите написать это самостоятельно, я могу дать рекомендацию

Используйте классы вместо идентификаторов - гораздо проще добавлять и удалять классы из элементов, чем менять идентификаторы (см. Пример ... это грубо, но это работает и должно указывать на правильное направление) путь)

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>

Пользовательский CSS без Javascript - Существует также еще один малоизвестный вариант использования 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>

Еще раз есть много других способов, которые, мы надеемся, были полезны для вас.