修改范围内的链接时出现问题

Question

我目前正在学习javascript/CSS，因此我试图实现在以下位置找到的动态Javascript面包屑：http://www.webmonkey.com/2010/02/build_dynamic_breadcrumbs_with_javascript/。代码如下。

我想要做的是修改面包屑生成的链接;我希望他们能够成为一片绿色的树荫，只要他们不活跃或被徘徊，就没有文字装饰。当他们活跃或徘徊时，我希望他们变红并加下划线。

面包屑正在正确生成，但它看起来像CSS没有正确应用。无论如何，这些链接都以下划线表示，并且在访问之后以蓝色开始，然后是紫色。这很奇怪，因为如果我修改应用的链接的大小，重量，字体家族等，而不是颜色或文字修饰。我可能在某个地方犯了一个初学者的错误，所以提前感谢您的时间和帮助！

我的CSS是：

.crumb{ 
    FONT-WEIGHT: medium; 
    FONT-SIZE:medium; 
    FONT-STYLE:italic; 
    FONT-FAMILY:Arial; 
} 
.crumb:link, .crumb:visited{ 
    color: green; 
    text-decoration: none; 
} 
.crumb:hover, .crumb:active: { 
    color:red; 
    text-decoration: underline; 
} 

的面包屑的代码是：

var crumbsep = " > "; 
var precrumb = "<span class=\"crumb\">"; 
var postcrumb = "</span>"; 
var sectionsep = "/"; 
var rootpath = "/"; // Use "/" for root of domain. 
var rootname = "Home"; 

var ucfirst = 1; // if set to 1, makes "directory" default to "Directory" 

var objurl = new Object; 
objurl['main-default'] = 'Site Home'; 

// Grab the page's url and break it up into directory pieces 
var pageurl = (new String(document.location)); 
var protocol = pageurl.substring(0, pageurl.indexOf("//") + 2); 
pageurl = pageurl.replace(protocol, ""); // remove protocol from pageurl 
var rooturl = pageurl.substring(0, pageurl.indexOf(rootpath) + rootpath.length); 
if (rooturl.charAt(rooturl.length - 1) == "/") //remove trailing slash 
{ 
    rooturl = rooturl.substring(0, rooturl.length - 1); 
} 
pageurl = pageurl.replace(rooturl, ""); // remove rooturl fro pageurl 
if (pageurl.charAt(0) == '/') // remove beginning slash 
{ 
    pageurl = pageurl.substring(1, pageurl.length); 
} 

var page_ar = pageurl.split(sectionsep); 
var currenturl = protocol + rooturl; 
var allbread = precrumb + "<a href=\"" + currenturl + "\">" + rootname + "</a>" +  
postcrumb; // start with root 

for (i=0; i < page_ar.length-1; i++) 
{ 
    var displayname = ""; 
    currenturl += "/" + page_ar[i]; 
    if (objurl[page_ar[i]]) 
    { 
    displayname = objurl[page_ar[i]]; 
    } 
    else 
    { 
    if (ucfirst == 1) 
    { 
     displayname = page_ar[i].charAt(0).toUpperCase() + page_ar[i].substring(1); 
    } 
    else 
    { 
     displayname = page_ar[i]; 
    } 
    } 
    allbread += crumbsep + precrumb + "<a href=\"" + currenturl + "\">" + displayname + 
    "</a>" + postcrumb; 
} 
document.write(allbread); 

Answer 1

可能不是一个JavaScript问题。首先获得标记权利，然后工作生成它。该文件撰写的 HTML结果是一样的东西：

<span class="crumb"><a href="...">linkText</a></span> 

的CSS应该是这样的：

.crumb a { 
    font-weight: medium; 
    font-size: medium; 
    font-style: italic; 
    font-family: arial; 
} 

.crumb a:link, .crumb a:visited { 
    color: green; 
    text-decoration: none; 
} 

.crumb a:hover, .crumb a:active { 
    color:red; 
    text-decoration: underline; 
} 

有一个额外的冒号.crumb一后：主动防止它从申请。现在工作。

顺便说一句，你为什么用文件撰写在客户端上执行此操作时它可能会简单得多做的服务器上，并只发送HTML？

Answer 2

如果更改CSS来你明白了什么：

.crumb a:link, .crumb a:visited{ 
    color: green; 
    text-decoration: none; 
} 
.crumb a:hover, .crumb a:active { 
    color:red; 
    text-decoration: underline; 
} 

所以伪类的格式应用于链接而不是跨度？

活动后的额外冒号。

Answer 3

您的CSS样式指的是跨度，而不是链接。将'.crumb'更改为'.crumb a'，并且它应该只是花花公子。

祝你好运！

Answer 4

你差不多一样的方式来编写JavaScript：

1. 在你的代码的至上励合变量
2. 使用浏览器检查运行代码
3. var objurl = new Object已经过时，应该用文字语法
4. document.location返回一个对象，而不是一个字符串
5. 你可以使用JsLint了解更多东西
6. 从来没有使用document.write它的更好的代码分配给现有元素

关于你的代码，它应该被重新写入类似：

http://jsbin.com/usisix/2/edit#javascript,html,live