2

所以我试图使用javascript在标题中创建一个内部样式表，但它不起作用。该脚本的这一点是突出显示我所在页面的选项卡。

下面不是我正在实施它的实际站点，只是测试 - 但它不能正常工作。这甚至可能吗？是的，我知道我可以使用内联 css 或其他东西来做到这一点，但这肯定会更令人困惑！

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

function getSecondPart(str) {
    return str.split('=')[1];
}

var site=getSecondPart(page));

text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')

}
</style>"

</script>
</head>
<body>
<ul>
<li class="nav_home"><a href="testtest.html?site=home">Home</a>
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>
4

2 回答 2

4
  1. parseURL返回一个 DOM 元素。
  2. page = parseUrl('').search，如果parseUrl('')返回一个字符串，将返回字符串方法search，这本身并不是很有用。
  3. var site=getSecondPart(page));有一个额外的括号。
  4. text没有定义。
  5. 像这样的类."nav_"4不是有效的类。
  6. 你有一个额外的右括号。

所有这些错误都会阻止您的代码运行。用于确保不发生语法错误的好工具是 Chrome 的 Web Developer、Firefox 的 Firebug 或JSHint。

完成后，执行以下操作：

var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-color: red; color: green; }";
document.body.appendChild(style);
于 2012-08-31T15:19:40.063 回答
1

有两种适当的解决方案，它们不是您要的，而是解决您的问题。

第一种方法是在你的每个lis 中使用不同的导航类。这就是你应该一直做的事情。

首选方式：

<li class="nav" id="home"> ...

您也可以这样做，但这不是一个好主意，因为家li是独一无二的。

<li class="nav nav-home"> ...

和

li.nav {
    background-color: red;
    color: green;
}

第二种方法是使用 CSS3 属性选择器。但是，这可能不适用于所有浏览器：

li[class^="nav"] {
    background-color: red;
    color: green;
}
于 2012-08-31T15:26:57.863 回答