用Javascript函数定义一个HTML类别

Question

我正在开发一个网站，遇到了一些问题..

我想要使用Javascript函数来定义我的类，像这样:

HTML代码：

<script type="text/javascript" src="../js/active_menu.js"></script>
<a id="demo" class="<script>document.write(myFunction('index.php'));</script>" href="index.php">Home</a>

Javascript 代码：

function myFunction(menu_punkt)
{
var state = 'not_active'
var a = document.URL.split("//");
a = (a[1] ? a[1] : a[0]).split("/"); 
a = a[1];

if (menu_punkt == a){
    state = 'navactive';
}
return state
}

- Simon Larsen

---

我不确定...它应该使class="navactive"，然后我的菜单按钮应该是蓝色的，但它没有发生。如果我只放入class="navactive"，它就可以工作。 - Simon Larsen

请问您能否解释一下您想要实现什么，这样我们可以更好地帮助您吗？但从我所看到的情况来看，似乎您正在尝试根据当前页面是否为主页来设置主页链接的类。 - zer0bit

Answer 1

使用 className 属性：

document.getElementById("demo").className = myFunction('index.php');

请确保在将 demo 添加到 DOM 后再调用此函数，否则 document.getElementById("demo") 将会失败。

- Halcyon

Answer 2

您不能在属性中使用<script>标签。最简单的更改可能是这样做：

<script type="text/javascript" src="../js/active_menu.js"></script>
<script>document.write('<a id="demo" class="' + myFunction('index.php') + '" href="index.php">Home</a>');</script>

如果您希望使页面对于禁用JavaScript的用户更加易于访问，或者想要允许DOM在JS执行时继续加载而不会被阻止，那么您可以考虑采取一种后期更改元素的方法。

- Jeremy Roman

Answer 3

首先，从“class”值中删除<script>标签，您可以使用JQuery使其更加优雅：

$(document).ready(function() {
    $('#demo').addClass(myFunction('index.php'))
});

function myFunction(menu_punkt)
{
    var state = 'not_active'
    var a = document.URL.split("//");

http://docs.jquery.com/Tutorials:Introducing_$%28document%29.ready%28%29

*如果您不想在函数的参数中硬编码页面的名称，您可以使用 'window.location.href' 和 'substr' 函数来解决。

http://www.w3schools.com/jsref/jsref_substr.asp

- the_marcelo_r