如何顯示「主動」而不是「第一個孩子」？

我還是想在這裏學習CSS和HTML：P無論如何，我得到了這個網站http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav這個代碼也許你們熟悉如何顯示「主動」而不是「第一個孩子」？

... 
    @media screen and (max-width:680px) { 
     ul.topnav li:not(:first-child) {display: none;} 
     ul.topnav li.icon { 
     float: right; 
     display: inline-block; 
     } 
    } 
...

我想表現的一個是活躍代替第一胎

來源

2016-12-02 Jane Doe

這將通過添加類活躍內做到：不，

@media screen and (max-width:680px) { 
     ul.topnav li:not(.active) {display: none;} 
     ul.topnav li.icon { 
     float: right; 
     display: inline-block; 
     } 
}

但我認爲在給定示例中活動類沒有被添加到選定的項目中。

更新請看這個小提琴：https://jsfiddle.net/arshadmuhammed/Lpuv6pwc/4/看看它是如何完成的。請注意，我在CSS中進行了一些更改，並添加了jQuery並添加了一些JavaScript。

CSS修改

li.active { 
    background: red; 
}

HTML修改 而不是給活躍類a標籤我給它的li本身，

<li class="active"><a href="#news">News</a></li>

新增的JavaScript/jQuery代碼

$('#myTopnav li').click(function() { 
    $('#myTopnav li').removeClass('active'); 
    $(this).addClass('active'); 
});

這將使所選菜單處於活動狀態。

來源

2016-12-02 04:55:08 arshad

不，它不工作:( –

這是因爲活動類沒有被添加到選定的菜單項，你應該先解決這個問題，如果你正在使用你提到的例子，你可能想寫一些javascript代碼 – arshad

我剛剛使用了和w3school完全相同的代碼作爲例子，已經有一個活動類 –

只要改變:first-child爲:active

編輯對不起，我沒有理解錯的話。我正在演示如何去做。

來源

2016-12-02 07:35:48 Jorge

如何顯示「主動」而不是「第一個孩子」？

回答

相關問題