Вкладки JavaScript заменяют класс - PullRequest
Новая
       12

Вкладки JavaScript заменяют класс

0 голосов
/ 08 июня 2018

Я создал разные классы в своем CSS для каждой вкладки и добавил стиль - background-color для каждой из них.Я написал код JavaScipt для перемещения по каждой вкладке и отображения соответствующего содержимого для этой вкладки.

В моем CSS я также создал другой класс (.now-active) и добавил стиль - background-color для активногоtab (в классе .now-active), который будет вызываться и использоваться моим кодом JavaScript.Все до этого момента работает нормально.

Проблема: я хочу, чтобы стиль цвета фона в приведенном выше классе .now-active (который вызывается только моей функцией JavaScript onClick) заменил исходный стиль (фон).цвет) текущей активной вкладки.

Это мой класс CSS для каждой вкладки: 

 /* Set CSS property for every button */
.tab button.all{
  background-color: #fff !important;
  color: #000 !important;
}

.tab button.assessment{
  background-color: #616161 !important;
  color: #fff !important;
}

.tab button.games{
  background-color: #00bcd4 !important;
  color: #000 !important;
}

.tab button.assignment{
  background-color: #607d8b !important;
  color: #fff !important;
}

.tab button.practice{
  background-color: #009688 !important;
  color: #fff !important;
}

Это CSS для активной вкладки, которая будет использоваться кодом JavaScript: 

/* Create an active/current tablink class */
.tab button.now-active {
    background-color: green;
}

Это мой код JavaScript для работы с Tab: 

function openTab(evt, Tab) {
    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(" now-active", "");
    }

    var now_active = document.getElementsByClassName("now-active");

    document.getElementById(Tab).style.display = "block"
    evt.currentTarget.className += " now-active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

И, наконец, это мой HTML: 

  <div class="penfs-bar hover-text tab penfs-hide-small penfs-hide-medium">
      <button class="tablinks all" onclick="openTab(event, 'All')" id="defaultOpen" style="width:20%">
          <p class="penfs-text-blue">View All</p>
      </button>

      <button class="tablinks assessment" onclick="openTab(event, 'Assessment')" style="width:20%">
          <p class="penfs-text-white">Assessment</p>
      </button>

      <button class="tablinks games" onclick="openTab(event, 'Games')" style="width:20%">
          <p class="penfs-text-white">Play Games</p>
      </button>

      <button class="tablinks assignment" onclick="openTab(event, 'Assignment')" style="width:20%">
          <p class="penfs-text-white">Assignment</p>
      </button>

      <button class="tablinks practice" onclick="openTab(event, 'Practice')" style="width:20%">
          <p class="penfs-text-white">Practice</p>
      </button>
 </div>

Методы, которые я пробовал: split (),replace (), removeClass () .. Может быть, я не правильно их использую.

Пожалуйста, помогите, как решить эту проблему?

1 Ответ

0 голосов
/ 08 июня 2018

Против вас работало несколько вещей:

  1. Второй элемент в вашей функции openTab («Назначение», «Практика») чувствителен к регистру - изменив его на более низкийcase позволит документу получить правильный элемент.

  2. Имя активного класса не использует атрибут! важный, в то время как все остальное было.

  3. getElementsByClassNameсоздает объект, похожий на массив, поэтому вам нужно будет либо выполнить итерацию по этому объекту, либо управлять состоянием, чтобы было только 1 элемент через что-то вроде этого: var clickedElement = document.getElementsByClassName(Tab)[0];

Я удалил вседругие вещи и поместите их в codePen - надеюсь, это поможет: 

function openTab(evt, Tab) {
    var previousElement = document.getElementsByClassName('now-active')[0];
    var clickedElement = document.getElementsByClassName(Tab)[0];

    if(previousElement){
      previousElement.classList.remove('now-active');  
    }

    clickedElement.classList.add('now-active');

}

https://codepen.io/MathiasaurusRex/pen/ERNPBz

...