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

Problem modifying links within span

本文关键字：问题链接 span 修改更新时间：2023-09-26

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

可能不是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 a:active阻止它应用。现在工作。

顺便问一下，为什么要在客户端用文档做这个?写，而在服务器上只发送HTML可能要简单得多?

你的CSS样式指的是跨度，而不是链接。变化"。把"to"揉碎。到处撒点面包屑，应该会很好用。

祝你好运!

如果你把css改成:

你会得到什么?

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

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

活动too后加冒号

关于你写Javascript的方式:

在代码的顶部组合变量
使用浏览器检查器运行代码
var objurl = new Object已弃用，您应该使用文字语法
document.location返回一个对象，而不是字符串
你可以使用JsLint来学习更多的东西
永远不要使用document.write，最好将代码分配给现有元素

对于你的代码，它应该被重写成这样:

http://jsbin.com/usisix/2/edit javascript、html、生活