match attr click in jQuery

Something Like that:
attr

For that you need to create first html code.

HTML

<ul class="gallery_menu">
  <li data-filter="Home">Home</li>
  <li data-filter="About">About</li>
  <li data-filter="Cont1">Cont1</li>
  <li data-filter="Cont2">Cont2</li>
</ul>
<div class="portfolio-filter">
  <div data-filter="Home">Home</div>
  <div data-filter="About">About</div>
  <div data-filter="Cont1">Cont1</div>
  <div data-filter="Cont2">Cont2</div>
</div>

CSS

.gallery_menu {
  padding: 0;
}
.gallery_menu li {
  display: inline-block;
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px 15px;
  cursor: pointer;
}

.portfolio-filter div {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #f5f5f5;
  display: inline-block;
}
.portfolio-filter div.active {
  background: #ccc;
}

Use jQuery Library.
After that add this JQuery code.

JS

$('.gallery_menu li').click(function(){
	var att_val =  $(this).attr('data-filter');
	 $('.portfolio-filter div').each(function(){
		if(att_val == $(this).attr('data-filter')){
      $('.portfolio-filter div').removeClass('active');
			$(this).addClass('active');
		}
	})
		return false;
	});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rzrMJr” default_tab=”css,result” user=”pradeepanvi”]See the Pen match attr click jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see