javascript - 使用 Javascript 将 <li> 类设置为事件状态，不起作用？

Question

我有几个 javascript 生成的子菜单，当在当前 url 中找到某个单词时会显示这些子菜单。

我需要将 li 标签设置为 li class="active" 以便用户可以看到他们当前浏览的是哪个子菜单页面。

我找到了各种似乎相关的代码，但我似乎无法做任何工作!不过，下面的内容非常适合生成子菜单 :)

如果有帮助，我将 twitter bootsrap 用于设计目的，出于某种原因，css 文件插入了很多箭头，例如。 .tabs>li

我真的不明白插入 > 的目的是什么，但这可能会导致某种问题吗？

非常感谢任何帮助!

var currenturl = location.pathname

if (currenturl.search(/welcome/i) >= 0)
    {
    document.write(<ul class="tabs">
    <li><a href="welcome.php">Home</a></li>
    <li><a href="contact_us.php">Contacts</a></li>
    <li><a href="user_manual.php" User Manual</a></li>
    <li><a href="help.php">Support &amp; Help</a></li>
    <li><a href="logout.php">Logout</a></li>
    </ul>);
    }

好的，这是一个更新!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

非常感谢您的回复。如前所述，我已在结束正文标记之前的 javascript 声明中添加了代码，但在 welcome.php 页面上我没有看到已生成任何子菜单。

作为对其他评论的回应，我想要实现的是根据当前页面的 URL 生成子菜单。

如果 URL 包含“support”，我希望它加载某个菜单，如果 URL 包含“sales”，我希望它加载另一个菜单。

一个示例子菜单，我希望在 URL 中检测到“销售”时出现的子菜单如下:

<ul class="tabs"> 
<li><a href="sales-contact_us.php">Contacts</a></li> 
<li><a href="sales-user_manual.php" User Manual</a></li> 
<li><a href="sales-help.php">Support &amp; Help</a></li> 
<li><a href="sales-something.php">Something Else</a></li> 
</ul>

要使当前子菜单处于事件状态，我必须进一步设置 li 标签为事件状态:

<li class="active">

这意味着我将需要另一段代码来检测 URL 字符串的结尾，例如。如果当前打开的页面是 sales-contact_us.php，那么该菜单项的 li 标签将被设置为事件。

谢谢!

Answer 1

你绝对不应该使用 document.write将元素附加到文档。改用 DOM 方法，例如

var menu = [
    { "label": "Home", "href": "welcome.php" },
    { "label": "Contacts", "href": "contact_us.php" }
    // etc
];

var list = document.createElement("ul");
list.setAttribute("class", "tabs");
for (var i = 0; i < menu.length; i++) {
    var label = menu[i].label;
    var href = menu[i].href;

    var item = document.createElement("li");
    var anchor = document.createElement("a");
    anchor.appendChild(document.createTextNode(label));
    anchor.setAttribute("href", href);
    if (href == currentUrl) {
        item.setAttribute("class", "active");
    }
    item.appendChild(anchor);
    list.appendChild(item);
}

document.body.appendChild(list); // you may want to append the list to another container

将上面的内容放在文档末尾的脚本 block 中(就在结束 </body> 标记之前)，以确保在尝试操作文档之前已加载该文档。