HTML 设置初始活动菜单选项答案

【问题标题】：HTML set initial active menu optionHTML 设置初始活动菜单选项
【发布时间】：2015-04-27 14:52:49
【问题描述】：

我的问题与How to set a active link as default when page first time load 类似，但我无法使用此解决方案。

我有一个 HTML 菜单：https://jsfiddle.net/gno1pzjv/

<div id="menu">
        <ul>
            <li> <a href="#">option1</a> </li>
            <li> <a href="#">option2</a> </li>
            <li> <a href="#">option3</a> </li>
            <li> <a href="#">option4</a> </li>
            <li> <a href="#">option5</a> </li>
            <li> <a href="#">option6</a> </li>
            <li> <a href="#">option7</a> </li>

        </ul>
    </div>

当我选择一个菜单选项时，菜单块应该变成黄色。

在我自己的代码中（但不是在小提琴中），菜单选项在选择时变为黄色，但默认页面在页面启动时不活动。所以目前页面总是以所有选项橙色开始。

有什么想法吗？

【问题讨论】：

你忘了在你的小提琴中包含 jQuery，$("#sub-header a") 不应该是 $("#menu a") 吗？如果你修复它似乎可以工作jsfiddle.net/j08691/gno1pzjv/1
没错，“#sub-header a”应该是“#menu a”，它确实在fiddle中工作，但为什么它需要一个指向fiddle.jshell.net的链接才能激活并且我的页面的替代方案是什么？我的页面应该在启动时调用 jQuery 函数吗？
确保您使用的是$(document).ready(...)，这样您的 javascript 就不会执行得太早。 learn.jquery.com/using-jquery-core/document-ready
默认页面的列表选项href是否匹配默认页面的url？

标签： javascript html css

【解决方案1】：

在你的 JS 中：

<script>
        $(document).ready(function() {
        $("#first").addClass("active");
        });
</script>

在 html 中：

<li id="first"> <a href="#">option1</a> </li>

【讨论】：