javascript - 在跨度内修改链接时出现问题

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 问题。首先获得正确的标记，然后生成它。 document.write 的 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 a:active 之后有一个额外的冒号阻止它应用。现在可以使用了。

顺便说一句，为什么在客户端使用 document.write 执行此操作，而在服务器上执行此操作并仅发送 HTML 可能要简单得多？