Führen Sie die jQuery-Funktion für jedes Element separat aus.

Question

Was muss ich dem Skript hinzufügen, um mehrere Tab-Navigationen nebeneinander auszuführen?

Ich habe eine kleine Tab-Navigation erstellt und habe damit Probleme, irgendwelche Ideen, wie man das beheben kann?

Bitte werfen Sie einen Blick auf das folgende Skript.

$(document).ready(function() { 
 

 
    $('ul.material--switch li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

 
    $('ul.material--switch li').removeClass('active'); 
 
    $('.tab-content').removeClass('active'); 
 

 
    $(this).addClass('active'); 
 
    $("#" + tab_id).addClass('active'); 
 
    }) 
 

 
})

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="material--switch"> 
 
    <li class="active" data-tab="option1">option1</li> 
 
    <li data-tab="option2">option2</li> 
 
</ul> 
 

 
<div id="option1" class="tab-content active"> 
 
    show option1 
 
</div> 
 

 
<div id="option2" class="tab-content"> 
 
    show option2 
 
</div> 
 

 

 
<ul class="material--switch"> 
 
    <li data-tab="option3">option3</li> 
 
    <li class="active" data-tab="option4">option4</li> 
 
</ul> 
 

 
<div id="option3" class="tab-content"> 
 
    show option3 
 
</div> 
 

 
<div id="option4" class="tab-content active"> 
 
    show option4 
 
</div>

Answer 1

Gerade jetzt Ihren Code wirkt gegen alle ul.material--switch li Elemente als ein Satz; Ihr Code weist nicht darauf hin, dass separate Gruppen von Registerkarten vorhanden sind, auf die Sie reagieren möchten. Hier habe ich eine .container div um jede Gruppe hinzugefügt, um den Tabset und seine verfügbaren Optionen zu enthalten; Ihre Funktion wird für jede .container separat ausgeführt und wirkt nur auf deren Inhalt.

$(document).ready(function() { 
 

 
    $('.container').each(function() { 
 
    var self = $(this); // in the next line `this` will get taken over by the `li`: 
 
    self.find('.material--switch li').click(function() { 
 
     var tab_id = $(this).attr('data-tab'); 
 
     self.find('.active').removeClass('active'); 
 
     $(this).addClass('active'); 
 
     $('#' + tab_id).addClass('active'); 
 
    }); 
 
    }); 
 
    
 
});

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <ul class="material--switch"> 
 
    <li class="active" data-tab="option1">option1</li> 
 
    <li data-tab="option2">option2</li> 
 
    </ul> 
 

 
    <div id="option1" class="tab-content active">option1</div> 
 
    <div id="option2" class="tab-content">option2</div> 
 
</div> 
 

 
<div class="container"> 
 
    <ul class="material--switch"> 
 
    <li class="active" data-tab="option3">option3</li> 
 
    <li data-tab="option4">option4</li> 
 
    </ul> 
 

 
    <div id="option3" class="tab-content active">option3</div> 
 
    <div id="option4" class="tab-content">option4</div> 
 
</div>

Answer 2

Wrap jeder Satz in einem enthält, div und dann ändern Sie einfach Ihre jQuery, um nur die Elemente innerhalb des übergeordneten des Elements zu zielen, die angeklickt werden:

$(document).ready(function() { 
 

 
    $('ul.material--switch li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 
    var parent = $(this).parent().parent(); 
 
    parent.find('ul.material--switch li').removeClass('active'); 
 
    parent.find('.tab-content').removeClass('active'); 
 

 
    $(this).addClass('active'); 
 
    parent.find("#" + tab_id).addClass('active'); 
 
    }) 
 

 
})

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
\t <ul class="material--switch"> 
 
\t <li class="active" data-tab="option1">option1</li> 
 
\t <li data-tab="option2">option2</li> 
 
\t </ul> 
 

 
\t <div id="option1" class="tab-content active"> 
 
\t show option1 
 
\t </div> 
 

 
\t <div id="option2" class="tab-content"> 
 
\t show option2 
 
\t </div> 
 
</div> 
 

 
<div class="container"> 
 
\t <ul class="material--switch"> 
 
\t <li data-tab="option3">option3</li> 
 
\t <li class="active" data-tab="option4">option4</li> 
 
\t </ul> 
 

 
\t <div id="option3" class="tab-content"> 
 
\t show option3 
 
\t </div> 
 

 
\t <div id="option4" class="tab-content active"> 
 
\t show option4 
 
\t </div> 
 
</div>