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

我目前正在学习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);

来源

2011-09-20 JWA

可能不是一个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？

来源

2011-09-20 06:07:15 RobG

谢谢您指出额外的冒号。 +添加a：完美运作。另外，我不确定客户端/服务器的含义。我认为这可能有点过头了，因为我仍然从此开始。你能解释一下吗？ – JWA

如果您使用的是document.write，那么您在加载页面时会这样做，因此服务器可以在HTML中编写面包屑并且您不需要在脚本中执行它，脚本更好。 :-) – RobG

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

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

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

活动后的额外冒号。

来源

2011-09-20 06:06:04

这工作完美，谢谢！ – JWA

非常欢迎 –

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

祝你好运！

来源

2011-09-20 06:08:57

谢谢你，你是对的！ – JWA

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

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

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

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

来源

2011-09-20 06:27:24 balexandre

谢谢你提供这样的信息答案。该代码看起来很棒，比原始代码更清洁！ – JWA

如果答案在某种程度上对你是神，你总是可以投票，这是我们在StackOverflow中做事的正常方式。你标出正确的答案，那个答案完全符合你的要求，并投票给其他人，或以其他方式帮助你，回答你自己的问题或你正在寻找的答案...... – balexandre

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

回答

相关问题