CSS優先度の問題およびjQueryにおける.eq()遍歴方法と:eq()セレクタの違い

23254 ワード
jquery
TABタブを書くときにいくつか面白い問題に遭遇し、記録します.
まずコードを貼り付けて
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>TAB   </title>

    <style>

        *{padding: 0;margin: 0;}

        body{font: normal 14px/1.5em Arial}

        #center{margin: 0 auto;width: 300px;position: relative;top: 50px;}

        .tab li{width: 50px;height: 25px;font: normal 12px/25px Arial;float: left;background: #F1F1F1;text-align: center;border: 1px solid #ccc;list-style: none;margin-right: 5px;cursor: pointer;

            -moz-border-radius: 15% 15% 0 0;

            -webkit-border-radius: 15% 15% 0 0;

            border-radius: 15% 15% 0 0;

            /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/

        }

        .tab_box{width: 300px;height: 200px;border: 1px solid #ccc;clear: both;}

        .tab li.hover{background: #C0C0C0}

        .tab li.selected{color: #fff;background: #6D84B4}

        .hide{display: none;}

    </style>

    <script type="text/javascript" src="../jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('.tab ul li').click(function() {

                $(this).addClass('selected')

                //     

                       .siblings().removeClass('selected');

                //        

                var index = $('.tab ul li').index(this);

                //       <li>      li       

                $('div.tab_box > div')

                //     

                    .eq(index).show()

                    .siblings().hide();

            }).hover(function() {

                $(this).addClass('hover');

            }, function() {

                $(this).removeClass('hover');

            });

            

        });

    </script>

</head>

<body>

<div id="center">

    <div class="tab">

    <ul>

        <li class="selected">  </li>

        <li>  </li>

        <li>  </li>

    </ul>

    </div>

    <div class="tab_box">

         <div>  </div>

        <div class="hide">  </div>

        <div class="hide">  </div>

        

    </div>

</div>

</body>

</html>

 
一、CSS優先度の問題.
これは効果図です.
搜狗截图20140725142245
上記のコードに従って、選択した状態で「スポーツ」のオプションにマウスを置くと、hover効果はありません.
これはCSS優先度の問題です.つかむ
.tab li.hover{background: #C0C0C0}

.tab li.selected{color: #fff;background: #6D84B4}

この二つは順序を入れ替える
.tab li.selected{color: #fff;background: #6D84B4}

.tab li.hover{background: #C0C0C0}

このような効果が得られます.
搜狗截图20140725143030
これによりCSS優先度の問題を引き出し、次のhttp://spartan1.iteye.com/blog/1526735を参照してください.
二、eq()遍歴方法と:eq()セレクタの違い
上記のコードでは、そのまま使用することができる.eq(index),
eqセレクタを使用するには、eq('+index+')のように取得したindexが変数であると書きます.
この問題は少しおもしろくて、debugも長い間やっと問題を調べました...
jQueryが推奨使用方法は.eq(index)は、関連する議論を参照することができます.
http://stackoverflow.com/questions/7563130/what-is-the-difference-between-eqindex-and-eqindex-in-jquery
http://stackoverflow.com/questions/10343150/the-jquery-eqindex-selector
もう一つの良いセレクタのステップアップ記事があります.http://www.qingdou.me/2344.html
vue親コンポーネント動的サブコンポーネントへの値伝達
【C++】動的順序テーブルを実現するPushBack(),PopBack(),PushFront(),PopFront(),Find(),Insert