0

基本的に、私は4つのリストを持っています。どちらのリストをクリックしても、クラスを追加したい、他のリストがクリックされた場合は、他のリストからクラスを削除したい。クリックしたものに適用したいだけです。

  <script>
    $(document).ready(function(){
      $("#li1").click(function(){
            document.getElementById('li1').classList.add('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');
      });

      $("#li2").click(function(){
            document.getElementById('li2').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li3").click(function(){
            document.getElementById('li3').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li4").click(function(){
            document.getElementById('li4').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');   
      });


    });
</script>


    ---HTML----
    <ul>
         <li id="li1"> some text here </li>
         <li id="li2"> some text here </li>
         <li id="li3"> some text here </li>
         <li id="li4"> some text here </li>
    </ul>
4

3 に答える 3

0

このようなものを試すことができます ( DEMO )

HTML:

<ul id="list1">
    <li class='current'>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul id="list2">
    <li class='current'>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JS::

$('#list1 > li').add('#list2 > li').on('click', function(){
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
});

または、多分これ( DEMO )

$('#list1 > li').add('#list2 > li').on('click', function(){
    $('ul[id^="list"] > li').siblings().removeClass('current');
    $(this).addClass('current');
});
于 2013-11-07T23:43:43.443 に答える