Javascript - Создание элемента с уникальным идентификатором, который сохраняется на разных вкладках - PullRequest
Новая
       7

Javascript - Создание элемента с уникальным идентификатором, который сохраняется на разных вкладках

0 голосов
/ 12 октября 2018

Я новичок в javascript, и я пытаюсь внедрить вкладки в небольшой мой проект.Однако в этом проекте я хочу, чтобы некоторые объекты с одинаковым идентификатором сохранялись между вкладками.Поскольку у вас может быть только 1 элемент для каждого идентификатора, мне было интересно, как мне это сделать, стоит ли пытаться создать класс и уничтожить / воссоздать элементы этого класса при смене вкладки?

Вот Fiddle желаемого результата (за исключением того, что я бы хотел, чтобы идентификатор кнопок всегда оставался постоянным)

HTML: 

<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <button class="Persistent",id="persistentbutton">Persistent button</button>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
  <button class="Persistent",id="persistentbutton1">Persistent button</button>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
  <button class="Persistent",id="persistentbutton2">Persistent button</button>
</div>



</body>
</html>

JS 

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 = "block";
    evt.currentTarget.className += " active";
}

CSS 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
...