Question

所以我对JQuery很陌生，只花了5个小时才开始工作。如果有人有更好的方法，我很乐意听到。

这是我的基本问题，如何才能更清洁，更精简呢？

我所做的是使用了minitabs插件，下面的代码将来回切换自定义标签。我需要一种方法让一个标签蓝色，另一个灰色取决于我在哪个标签上。我点击的是 tab1 ，即使我点击 tab2 也会保持蓝色，只是很时髦，直到修复它。正如你所看到的那样，这不是最干净的方法，但它有效。我相信如果你想试试这个，可以在这里使用minitab插件。

http://minitabs.googlecode.com/files/jquery.minitabs.js

JQuery的：

$(document).ready(function(){

   $("#tabs").minitabs('slow', 'fade');

        $("#tab1").click(function()
            {
                var $this = $(this);
                if( $this.is('.removed') ) 
                     {
                       $this.removeClass('removed');
                       $this.addClass('selected');
                       $('#tab2').removeClass('selected');
                       $("#tab2").addClass('removed');
                } else {
                       $('#tab2').removeClass('selected');
             }
    return false;
        });
        $("#tab2").click(function()
            {
                var $this = $(this);
                if( $this.is('.removed') ) 
                  {
                        $this.removeClass('removed');
                        $this.addClass('selected');
                       $("#tab1").removeClass('selected');
                       $("#tab1").addClass('removed');
                } else {
                       $('#tab1').removeClass('selected');

              }
                return false;
        });
   });

体：

<div id="tabs"> 
          <ul>
            <li><a href="#quick-links" class="tab-l selected" id="tab1">tab-l</a></li>
            <li><a href="#newsletter-link" class="tab-r removed" id="tab2">tab-r</a></li>
        </ul>

        <div id="quick-links">
<ul>
  <li>Look at me getting myself all in a frenzy!</li>               
</ul>
        </div>

        <div id="newsletter-link">
  Sometimes it's would be nice if they reported the fun news!
        </div>   

</div>

Answer 1

我简要地看了一下，并没有发现这种不那么复杂的设置有任何问题，它利用了minitabs自动将类“current”应用到当前选中的标签：

<head>
    <style type="text/css">
    .tabs a {
        background: grey;
    }
    .tabs a.current {
        background: blue;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#tabs").minitabs('slow', 'fade');
    });
    </script>
</head>
<body>
    <div id="tabs">
        <ul class="tabs">
            <li><a href="#quick-links" class="tab-l current" id="tab1">tab-l</a></li>
            <li><a href="#newsletter-link" class="tab-r" id="tab2">tab-r</a></li>
        </ul>

        <div id="quick-links">
            <ul>
                <li>Look at me getting myself all in a frenzy!</li>
            </ul>
        </div>

        <div id="newsletter-link">
            Sometimes it's would be nice if they reported the fun news!
        </div>
    </div>
</body>

对我来说，处理你完美描述的案例。

使用addClass＆amp; amp; JQuery和Custom Tabs removeClass

1 个答案: