Question

我目前正在学习javascript / CSS，所以我正在尝试实现在http://www.webmonkey.com/2010/02/build_dynamic_breadcrumbs_with_javascript/找到的动态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

如果将css更改为：

，您会得到什么？

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

所以伪类格式应用于链接而不是span？

活跃后的额外冒号。

Answer 2

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

您的CSS样式指的是跨度，而不是链接。 <.crumb'在任何地方改为'.crumb a'它应该只是花花公子。

祝你好运！

Answer 4

几乎是你写Javascript的方式：

将代码顶部的变量合并
使用浏览器检查器运行代码
var objurl = new Object，您应该使用文字语法
document.location返回一个对象，而不是字符串
您可以使用JsLint来了解更多内容
从不使用document.write最好将代码分配给现有元素

关于你的代码，它应该重写为：

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

修改span内的链接时出现问题

4 个答案: