8

ul タグの例を次に示します。

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>

cssまたはJavaScriptを使用して、クリックまたはアクティブなときにこのUlボーダーを別の色に設定する方法はありますか? そして、別の場所をクリックすると、この効果はなくなりました。作って検索してみましたが、いい結果が出ませんでした。

JS Fiddle デモ: http://jsfiddle.net/saifrahu28/YFF6P/

jquery ソリューションがあれば問題ありません。

4

3 に答える 3

13

各 li に tabindex を追加できます。これにより、アウトラインが有効になります (基本的に、フォーカスのある入力のように機能します)。

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
</ul>

http://jsfiddle.net/YFF6P/2/

その後outline、css のプロパティでアウトラインの外観を変更できます。アウトラインの例を次に示します: http://jsfiddle.net/YFF6P/4/ css:

li:focus {
    outline:solid 1px black;
}
于 2013-05-14T13:17:51.187 に答える
7

FAngels の回答から構築します....

リスト スタイルをハード コードする必要はありません。そうしないと、css で !important を使用する必要があります。tabindex を UL に変更し、それにクラスを追加します。フォーカスがあると、ul:focus アイテムに変わります。

HTML

<ul tabindex="1" class="thisList" >
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>

</ul>

CSS

ul:focus {
    outline:solid 1px green;
}

.thisList { list-style-type:none; padding:5px ; border:solid 1px #666666; }

http://jsfiddle.net/YFF6P/14/

于 2013-05-14T13:58:57.973 に答える
0

li:active, .test li:focus{border: 1px 単色の赤;}

jQuery addClass() 関数を使用しないのはなぜですか?

于 2013-05-14T13:15:47.443 に答える