Запустите функцию jQuery для каждого элемента отдельно

Question

Что мне нужно добавить в скрипт для запуска нескольких навигационных панелей?

У меня есть небольшая навигационная панель и проблемы с этим, любые идеи, как это исправить?

Пожалуйста, взгляните на сценарий ниже.

$(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

Сейчас ваш код действует против всех ul.material--switch li элементов, как один комплект; ваш код не имеет никаких указаний на наличие отдельных наборов вкладок, на которые вы хотите действовать. Здесь я добавил .container div вокруг каждой группы, чтобы содержать таббит и его доступные параметры; ваша функция запускается отдельно для каждого .container и действует только на ее содержимое.

$(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 каждый набор в содержащей DIV, а затем просто изменить Jquery только целевые элементы внутри родительского элемента, который будучи щелкнули:

$(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>