Как заставить динамическую кнопку работать на JavaScript? - PullRequest
Новая
       46

Как заставить динамическую кнопку работать на JavaScript?

0 голосов
/ 27 марта 2019

У меня есть 3 кнопки, которые работают как вкладки, я хочу сделать их динамичными.

Прямо сейчас у меня есть только статический текст внутри кнопки onclick.Как сделать его динамичным, не изменяя текст в каждом классе вручную?потому что я добавлю больше кнопок, а не три 

-- HTML --

<ul class="tab">
<li class="tablinks" onclick="openCity(event, 'City One')" id="defaultOpen"><p>Food & Beverages</p></li>
<li class="tablinks" onclick="openCity(event, 'City Two')"><p>Sports & Outdoors</p></li>
<li class="tablinks" onclick="openCity(event, 'City Three')"><p>Furniture & Household</p></li>
</ul>

<div id="City One" class="tabcontent fade in active row">
         BODY CONTENT
</div>
<div id="City Two" class="tabcontent fade in active row">
         BODY CONTENT
</div>
<div id="City Three" class="tabcontent fade in active row">
         BODY CONTENT
</div>

-- SCRIPT --
function openCity(evt, cityName) {
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(cityName).style.display = "inline-flex";
evt.currentTarget.className += " active";
}

jQuery("")
...