trigger attribute on multiple matches elements

See more:

Javascript

HTML

jQuery

Hi everyone.

I've three containers that contain a attribute. I wanna add a class for all matches element on a parent that have common attr. But the problem is on one container matches element class has been added but not all three container's match element.

here is code :

<!-- container 1 on header -->
<ul class="dropdown-menu">
	<li>
		<a data-toggle="tab" class=""  link-tab="lt-department" href="">Departments</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-styles" href="">Styles</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-style-size" href="">Style Sizes</a>
	</li>
</ul>

<!-- container 2 on left sidebar -->
<ul class="sidebar-menu">
	<li>
		<a data-toggle="tab" class="" link-tab="lt-department" href="">Departments</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-styles" href="">Styles</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-style-size" href="">Style Sizes</a>
	</li>
</ul>

<!-- container 3 on main page -->
<ul class="tab-menu">
	<li>
		<a data-toggle="tab" class="" link-tab="lt-department" href="#departmentsContainer">Departments</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-styles" href="#tblStyles">Styles</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-style-size" href="#styleSizesContainer">Style Sizes</a>
	</li>
</ul>

I wanna somthing like this
if i clicked on li-department from any one of the three containers

<!-- container 1 on header -->
<ul class="dropdown-menu">
	<li>
		<a data-toggle="tab" class="active"  link-tab="lt-department" href="">Departments</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-styles" href="">Styles</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-style-size" href="">Style Sizes</a>
	</li>
</ul>

<!-- container 2 on left sidebar -->
<ul class="sidebar-menu">
	<li>
		<a data-toggle="tab" class="active" link-tab="lt-department" href="">Departments</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-styles" href="">Styles</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-style-size" href="">Style Sizes</a>
	</li>
</ul>

<!-- container 3 on main page -->
<ul class="tab-menu">
	<li>
		<a data-toggle="tab" class="active" link-tab="lt-department" href="#departmentsContainer">Departments</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-styles" href="#tblStyles">Styles</a>
	</li>
	<li>
		<a data-toggle="tab" link-tab="lt-style-size" href="#styleSizesContainer">Style Sizes</a>
	</li>
</ul>