0

3 番目のリンクを選択して右の境界線を削除するにはどうすればよいですか? 最初の 3 つはテキスト リンクで、最後のテキスト リンクから右枠を削除したいと考えています。最後の 2 つはボタンです。ボタンの間または端の境界線も必要ありません。これでどれだけ苦労しているか信じられない。それはおそらく単純な解決策ですが、ブラウザでそれを理解するには永遠にかかります. ありがとう。

Javascript

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="javascript">
        $(document).ready(function() {
        $("ul.subnavigation li:nth-child(3)").addClass("last-child");
    });
        </script>

HTML

<ul class="subnavigation">
                <li><a href="$sign_in_url" id="Program" rel="nofollow" ></a>Program </li>
                <li><a href="$sign_in_url" id="About" rel="nofollow" >About </a> </li>
                <li><a href="$sign_in_url" id="faq" rel="nofollow" >How to/FAQs</a> </li>
                <li><a href="$sign_in_url" id="register" rel="nofollow" class="btn_register hide-text">Register</a> </li>
                <li><a href="$sign_in_url" id="signin" rel="nofollow" class="btn_signin hide-text">Sign in</a></li></ul>

CSS

ul.subnavigation {  
    font-family:Arial, sans-serif; 
    font-weight:bold; 
    font-size:16px;
    color:#333333; 
    list-style:none;
    }

.subnavigation li{
    display:inline;
    border-right:1px solid #ccc;
}

.subnavigation li:last-child{
    display:inline;
    border-right:0px;
}


.last-child {border:none;}

.subnavigation li a   {
    text-decoration:none;
    padding:0 10px 0 10px;
    line-height:18px;

    }

.subnavigation li a:hover {
    color:#2274ac;
    }


.subnavigation a.btn_register {
    background:url(../images/nt_btn-register.png) no-repeat;
    width:66px; 
    height:23px;
    display:inline-block;
    margin:0 5px 0 0;
    float:right;
    text-indent:-999px;
    }

.subnavigation a.btn_signin {
    background:url(../images/nt_btn-signin.png) no-repeat;
    width:56px; 
    height:23px;
    display:inline-block;
    margin:0 10px 0 5px;
    float:right;
    text-indent:-999px;
    }

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

JSフィドルはこちら

4

3 に答える 3

2

jQueryは必要ありません。ここにプレーンCSSがあります-DEMO

.subnavigation li:nth-child(n+3) {
    border: 0;
}

アップデート

上記のコードは古い IE では機能しません - :nth-childブラウザのサポート

下位互換性を持たせるには、jQuery を使用する必要があります - DEMO

$(function() {
    $(".subnavigation").find("li:gt(1)").css("border", 0);
});
于 2012-09-26T20:46:06.963 に答える
1

cssをより具体的に変更します

li.last-child {border-right:0px;}

次に、jQuery .slice（）を使用してインデックス2の要素を取得liし、右の境界線を削除します

$(document).ready(function() {
   $("ul.subnavigation li").slice(2).addClass("last-child");
});​

http://jsfiddle.net/A46Ka/2/

于 2012-09-26T20:43:14.853 に答える
0

また、これは動作するはずです

$("ul.subnavigation li:gt(1)").addClass("last-child");

スタイルとしてこれを追加すると、うまくいくはずです

.last-child 
{
   border-right:0px !important;
}

設定!importantすると、デフォルトのスタイルが上書きされます

このフィドルをチェック

于 2012-09-26T20:42:07.573 に答える