1

このコードではul、アクティベートli色で色付けされた境界線が必要です。たとえば、.activate要素が灰色の場合、ul境界線の下部は灰色でなければなりません。以下のマークアップを使用してこれを達成するにはどうすればよいですか?

<nav>
    <ul>
        <li class="gray"><a href="#">All</a></li>
        <li class="blue"><a href="#">Item 1</a></li>
        <li class="activate orange"><a href="#">Item 2</a></li>
        <li class="green"><a href="#">Item 3</a></li>
    </ul>
</nav>
4

3 に答える 3

0

現在のところ、クロスブラウザー互換の CSS ソリューションのみはありません。jQuery を使用しているものを次に示します。

フィドルのデモ:

http://jsfiddle.net/robertp/M9SGU/

マークアップ:

<ul id="menu">
    <li class="gray"><a href="#">All</a></li>
    <li class="blue"><a href="#">Item 1</a></li>
    <li class="orange"><a href="#">Item 2</a></li>
    <li class="green"><a href="#">Item 3</a></li>
</ul>

JavaScript:

$('#menu').on('click', 'li', function(event){
    event.preventDefault();

    var $item = $(event.currentTarget);
    $item.siblings().removeClass('active');
    $item.addClass('active');

    $item.parent().css('border', '1px solid ' + $item.css('color'));
});

スタイリング：

.gray,
.gray a {
    color: gray;
}
.blue,
.blue a {
    color: blue;
}
.orange,
.orange a {
    color: orange;
}
.green,
.green a{
    color: green;
}
于 2013-06-04T20:08:23.510 に答える
-1

現時点ではまったく標準ではありませんが、CSS4 セレクターを使用すれば可能です。

ul!>li.activate.gray {border-bottom-color:gray}
ul!>li.activate.blue {border-bottom-color:blue}
ul!>li.activate.orange {border-bottom-color:orange}
ul!>li.activate.green {border-bottom-color:green}

W3C の説明:

E! > F an E element parent of an F element

于 2013-06-04T20:05:45.670 に答える