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

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 可能要简单得多？

Answer 2

您的 CSS 样式指的是跨度，而不是链接。在任何地方将“.crumb”更改为“.crumb a”，它应该可以正常工作。

祝你好运！

Answer 3

如果将 css 更改为：

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

因此伪类格式应用于链接而不是跨度，您会得到什么？

活动后额外冒号也。

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，实时