如何显示“主动”而不是“第一个孩子”？

我还是想在这里学习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

如何显示“主动”而不是“第一个孩子”？

回答

相关问题