coding taps in jquery -

i new jquery , have problem selecting elements within . in code wanted show , hide "contents" div have same class of li click on . should work taps . wrote code it's not working .

$('.menu li').click(    function() {      var x = this.attr("class");      $('.contents').children().hasclass(x).show();      $('.contents').children().not(hasclass(x)).hide();    }  )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="menu ">    <ul>      <li class="one"></li>      <li class="two"></li>      <li class="three"></li>    </ul>  </div>  <div class="contents">    <div class="one" style="background-color:red"></div>    <div class="two" style="display: none; background-color:yellow"></div>    <div class="three" style="display: none; background-color:orange"></div>  </div>

i'm not sure if approach right way !

the problem class attributes can hold multiple, arbitrary values in particular order. makes them unsuitable exact-match targeting.

i instead give <div> elements id attributes , use attribute on <li> elements target ids. example

<li class="one" data-target="one"> 

and

<div class="one" id="one"> 

and in jquery

$('.menu li[data-target]').on('click', function() {   var targetid = this.getattribute('data-target')   $('.contents div').each(function() {     $(this).toggle(this.id === targetid)   }) }) 

see http://api.jquery.com/toggle/#toggle-display