1

ですから、私はJQueryにかなり慣れておらず、これを機能させるために5時間費やしました。誰かがより良いアプローチを持っているなら、私は聞いてみたいです。

それが私の基本的な質問です。どうすればよりクリーンで合理化できるのでしょうか。

私がしたことはminitabsプラグインを使用し、以下のコードはカスタムタブを前後に切り替えることです。使用しているタブに応じて、一方のタブを青に、もう一方のタブを灰色にする方法が必要でした。私がぶつかったのは、 tab2をクリックしてもtab1が青色のままで、これが修正されるまではファンキーだったということです。ご覧のとおり、これは最もクリーンなアプローチではありませんが、機能します。これを試してみたい場合は、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>
4

1 に答える 1

2

私はこれを簡単に調べましたが、現在選択されているタブにクラス「現在」を自動的に適用するミニタブを利用する、この単純な設定で問題は見られませんでした。

<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 に答える