javascript - 使用 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
}

Answer 1

您不能<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 执行的情况下继续加载，您可以考虑采用事后更改元素的方法。

Answer 2

使用className属性：

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

确保在添加到 DOM之后 调用它，否则会失败。demodocument.getElementById("demo")

Answer 3

首先，<script>从 'class' 值中删除标签，您可以使用 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