Question

我知道这个jQuery代码的很大一部分是不必要的，特别是在重复fadeOut和fadeIn事件时。

   <script type='text/javascript'>
         $(function(){
              $('.panel').hide();

              $('.work_button').click(function(){
                    $('#cms,#contact').fadeOut(function(){
                    $('#work').fadeIn();
                    });
              });

              $('.cms_button').click(function(){
                    $('#work,#contact').fadeOut(function(){
                          $('#cms').fadeIn();
                    });
              });

              $('.contact_button').click(function(){
                    $('#cms,#work').fadeOut(function(){
                          $('#contact').fadeIn();
                    });
              });

              $('.home_button').click(function(){
                    $('.panel:visible').fadeOut();
              });
        });
    </script>

<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button">work</li>
<li class="cms_button">cms</a></li>
<li class="contact_button">contact</a></li>
</ul>
</div>

    <div class="panel" id="work">
        <p>...</p>
    </div>

    <div class="panel" id="cms">
        <p>...</p>
    </div>

    <div class="panel" id="contact">
        <p>...</p>
    </div>

Answer 1

我会将具有相同类名的按钮命名为面板ID：

<button class="home">Home</button>
<button class="work">Work</button>
<button class="cms">CMS</button>
<button class="contact">Contact</button>

<div class="panel" id="home">
    <p>..Home..</p>
</div>

<div class="panel" id="work">
    <p>..work..</p>
</div>

<div class="panel" id="cms">
    <p>..cms..</p>
</div>

<div class="panel" id="contact">
    <p>..contact..</p>
</div>

然后您可以简化脚本（demo）：

$(function() {
    $('.panel').hide();

    $('button').click(function(){
        var tar = $(this).attr('class'); // replace "_button" if there
        $('.panel').fadeOut(function(){
            $('#' + tar).fadeIn();
        });

    });

});

如果被问及如何使菜单工作，我会this：

$(function() {
    $('.panel:not(#home)').hide();

    $('.menu li').click(function() {
        var tar = '#' + $(this).attr('class').replace("_button",'');
        $('.panel:not(' + tar + ')').fadeOut();
        $(tar).fadeIn();
    });

});

Answer 2

$(function(){
      $('.panel').hide();

      $('.work_button,.cms_button,.home_button').click(function(){
            var thiss=$(this);
            $('.panel').fadeOut(function(){
            thiss.fadeIn();
            });
      });
      $('.home_button').click(function(){
            $('.panel:visible').fadeOut();
      });

});

Answer 3

<script type='text/javascript'>
    $(function(){
       $('.panel').hide();
        $('.work_button').click(function(){
             FadeOutIn($('#cms,#contact'), $('#work'));
        });
        $('.cms_button').click(function(){
             FadeOutIn($('#work,#contact'), $('#cms'));
        });
        $('.contact_button').click(function(){
             FadeOutIn($('#cms,#work'), $('#contact'));
        });
        $('.home_button').click(function(){
             FadeOutIn($('.panel:visible'), null));
        });
    });

    function FadeOutIn(fadeOutElements, fadeInElements) {
       fadeOutElements.fadeOut(function(){
             fadeInElements.fadeIn();
       });
    }
 </script>

Answer 4

使用jQuery UI，这将让生活更轻松！

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#panels').accordion();
    });
</script>

<div id="#panels">
    <h3><a href="#">Work</a></h3>
    <div class="panel" id="work">
        <p>...</p>
    </div>

    <h3><a href="#">CMS</a></h3>
    <div class="panel" id="cms">
        <p>...</p>
    </div>

    <h3><a href="#">Contact</a></h3>
    <div class="panel" id="contact">
        <p>...</p>
    </div>
</div>

请帮我简化这个jQuery代码

4 个答案: