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

我目前正在學習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);

來源

2011-09-20 JWA

可能不是一個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？

來源

2011-09-20 06:07:15 RobG

謝謝您指出額外的冒號。 +添加a：完美運作。另外，我不確定客戶端/服務器的含義。我認爲這可能有點過頭了，因爲我仍然從此開始。你能解釋一下嗎？ – JWA

如果您使用的是document.write，那麼您在加載頁面時會這樣做，因此服務器可以在HTML中編寫麪包屑並且您不需要在腳本中執行它，腳本更好。 :-) – RobG

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

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

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

活動後的額外冒號。

來源

2011-09-20 06:06:04

這工作完美，謝謝！ – JWA

非常歡迎 –

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

祝你好運！

來源

2011-09-20 06:08:57

謝謝你，你是對的！ – JWA

你差不多一樣的方式來編寫JavaScript：

在你的代碼的至上勵合變量
使用瀏覽器檢查運行代碼
var objurl = new Object已經過時，應該用文字語法
document.location返回一個對象，而不是一個字符串
你可以使用JsLint瞭解更多東西
從來沒有使用document.write它的更好的代碼分配給現有元素

關於你的代碼，它應該被重新寫入類似：

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

來源

2011-09-20 06:27:24 balexandre

謝謝你提供這樣的信息答案。該代碼看起來很棒，比原始代碼更清潔！ – JWA

如果答案在某種程度上對你是神，你總是可以投票，這是我們在StackOverflow中做事的正常方式。你標出正確的答案，那個答案完全符合你的要求，並投票給其他人，或以其他方式幫助你，回答你自己的問題或你正在尋找的答案...... – balexandre

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

回答

相關問題