Question

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

我需要将li标记设置为li class="active"，以便用户可以查看他们当前正在浏览的子菜单页。

我发现了各种相似的代码，但我似乎无法做任何工作！以下工作完美地生成子菜单：）

如果它有助于我将twitter boots用于设计目的，由于某种原因，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>);
    }

Ok这是一个更新!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

哇非常感谢你的回复。我已经在关闭的body标签之前在javascript声明中添加了代码，尽管在welcome.php页面上我没有看到任何子菜单已经生成。

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

如果网址包含“支持”，我希望它加载某个菜单，如果“销售”我希望它加载另一个菜单。

示例子菜单，我想在URL中检测到“sales”时显示的子菜单如下：

<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

将上述内容放在文档末尾的脚本块中（在结束</body>标记之前）以确保文档已加载，然后再尝试操作它。

使用Javascript将<li>类设置为活动状态，不起作用？</li>

1 个答案: