修改範圍內的鏈接時出現問題

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問題。首先獲得標記權利，然後工作生成它。該文件撰寫的 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？

Answer 2

如果更改CSS來你明白了什麼：

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

所以僞類的格式應用於鏈接而不是跨度？

活動後的額外冒號。

Answer 3

您的CSS樣式指的是跨度，而不是鏈接。將'.crumb'更改爲'.crumb a'，並且它應該只是花花公子。

祝你好運！

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,live