如何更改CSS鏈接點擊<a>標籤？

我一直在嘗試幾個小時才能讓我的錨定標記工作，如果點擊它，它會更改指向顏色主題CSS的鏈接的href。如何更改CSS鏈接點擊<a>標籤？

這是我到目前爲止發現和發現的。我一直試圖改變它到紅色的主題。

的HTML（列表標記之間移除白色空間，以防止在視覺間隙引起inline-block）

<header> 
    <ul> 
    <li> 
    <a id="theme_selector_red" href="" onclick="applyCSS('css/theme_red.css');"></a> 
    </li> 
    <li> 
    <a id="theme_selector_green" href=""></a> 
    </li> 
    <li> 
    <a id="theme_selector_blue" href=""></a> 
    </li> 
    </ul> 
</header>

鏈接標記

<link id="color_theme" type="text/css" rel="stylesheet" href="css/theme_blue.css">

的JavaScript 我試圖.attr（）以不同的方式嘗試刪除並重置屬性好運。警報只是爲了測試點擊是否進入該功能，是的，每次點擊鏈接時，網站都會顯示警報。

function applyCSS(css_link){ 
    $('#color_theme').attr("href", css_link); 
    document.getElementById('color_theme').removeAttribute('href'); 
    document.getElementById('color_theme').setAttribute('href', css_link); 
    alert('hey'); 
};

link標籤的作品，它只是不改變其href當我點擊的鏈接。 :(

來源

2013-10-20 Brian

變化的onclick這樣：。

onclick="applyCSS('css/theme_red.css'); return false;"

目前，運行applyCSS後，它遵循的鏈接，並刷新頁面「返回false」將阻止這種行爲

來源

2013-10-20 00:43:43

這是什麼魔術？謝啦。我很樂意讚揚，但似乎我需要更多的聲譽才能做到這一點。 – Brian

基本的web編程。好時光 – Brian

這裏是例子告訴你如何做到這一點的偉大的，因爲即使刷新它留在你選擇

<html> 
<head> 
<link href="style1.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="style2.css" media="screen" rel="alternate stylesheet" title="style2" type="text/css" /> 
<link href="style3.css" media="screen" rel="alternate stylesheet" title="style3" type="text/css" /> 
<script src="BCo.js" type="text/javascript"></script> 
</head> 
<body> 
<ul> 
<li> 
<a href="javascript:chooseStyle('style1',60)" target="_self" >1</a> 
</li> 
<li> 
<a href="javascript:chooseStyle('style2',60)" target="_self" >2</a> 
</li> 
<li> 
<a href="javascript:chooseStyle('style3',60)" target="_self">3</a> 
</li> 
</ul> 
<h1>test</h1> 
</body> 
</html>

，這裏的最後一個主題是JS文件BCo.js代碼

var manual_or_random="manual" //"manual" or "random" 
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random. 

//////No need to edit beyond here////////////// 

function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair 
if (document.cookie.match(re)) //if cookie found 
return document.cookie.match(re)[0].split("=")[1] //return its value 
return null 
} 

    function setCookie(name, value, days) { 
var expireDate = new Date() 
//set "expstring" to either future or past date, to set or delete cookie, respectively 
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5) 
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"; 
} 

function deleteCookie(name){ 
setCookie(name, "moot") 
} 


function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled 
var i, cacheobj, altsheets=[""] 
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) { 
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title 
cacheobj.disabled = true 
altsheets.push(cacheobj) //store reference to alt stylesheets inside array 
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter 
cacheobj.disabled = false //enable chosen style sheet 
} 
} 
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non) 
var randomnumber=Math.floor(Math.random()*altsheets.length) 
altsheets[randomnumber].disabled=false 
} 
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet 
} 

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie 
if (document.getElementById){ 
setStylesheet(styletitle) 
setCookie("mysheet", styletitle, days) 
} 
} 

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu 
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu 
var element=(element.type=="select-one") ? element.options : element 
for (var i=0; i<element.length; i++){ 
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value 
if (element[i].tagName=="OPTION") //if this is a select menu 
element[i].selected=true 
else //else if it's a radio button 
element[i].checked=true 
break 
} 
} 
} 
} 

if (manual_or_random=="manual"){ //IF MANUAL MODE 
var selectedtitle=getCookie("mysheet") 
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored 
setStylesheet(selectedtitle) 
} 
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE 
if (randomsetting=="eachtime") 
setStylesheet("", "random") 
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting 
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty 
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value 
else 
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie 
} 
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting 
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable 
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value 
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable 
} 
else 
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie 
} 
}

也只是櫃面你想在這裏做快速檢查的style1.css和style2.css

style1.css代碼

h1 { 
font-family: Tahoma,arial; 
font-size: 18px; 
font-weight: bold; 
line-height: 20px; 
color: #1D828C; 
}

style2.css代碼

代碼

h1 { 
color: #7c7c7c; 
}

來源

2013-10-20 01:14:22 JackNew

對不起，我忘了添加js代碼現在添加測試和hopfuly它會工作，因爲你想 – JackNew

也只是incase你想做快速檢查這裏是style1.css和style2.css的代碼 – JackNew

我不是試圖深入javascript。但我確實注意到它在清爽後會消失。感謝您的回答。這對未來的參考很有用。 – Brian

-1

你可以嘗試PHP方法。

switch ($theme) { 
    case 'red': 
    $theme_file = 'red.css'; 
    break; 

    case 'blue': 
    $theme_file = 'blue.css'; 
    break; 

    default: 
    $theme_file = 'red.css'; 

}

然後用HTML，所有你需要的是：

<a href="?theme=red">Red</a> 
<a href="?theme=blue">Blue</a>

如果可以用這個方法來設置cookies來的主題將被記住用戶返回時，或者如果你的工作與數據庫，你可以永久存儲它。

來源

2013-10-20 01:15:39 user2250471

1.這不是PHP問題。 2.你沒有提供'$ theme'來自哪裏的完整解釋（並且它不應該**依賴['register_globals']（http://php.net/manual/en/security.globals） .PHP）） –

如何更改CSS鏈接點擊<a>標籤？

回答

相關問題