1

所以我对 JQuery 很陌生，只花了 5 个小时来完成这项工作。如果有人有更好的方法，我很想听听。

这是我的基本问题，如何才能做得更干净、更精简？

我所做的是使用 minitabs 插件，下面的代码将做的是来回切换自定义选项卡。我需要一种方法让一个选项卡为蓝色，另一个选项卡为灰色，具体取决于我所在的选项卡。我遇到的是tab1即使我点击tab2也会保持蓝色，只是在修复它之前很时髦。如您所见，这不是最干净的方法，但它有效。我敢肯定，如果你想试试这个 minitab 插件可以在这里。

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

查询：

$(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>
4

1 回答 1

2

我简要地看了一下，并没有看到这个不太复杂的设置有任何问题，它利用 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>

对我来说，处理你完美描述的情况。

于 2009-02-11T10:04:39.533 回答