点击<a>标签后</a>如何更改CSS链接<a>？</a>

Question

I have been trying for hours to get my anchor tags to work that if clicked, it changes the href of a link pointing to a color theme CSS. 我一直在努力几个小时，以使锚标签能够正常工作，如果单击该锚标签，它将更改指向颜色主题CSS的链接的href 。

Here is what i got and discovered so far. 到目前为止，这是我所发现的。 I have only been trying to change it to the red theme. 我只是试图将其更改为红色主题。

the html (white spaces removed between list tag to prevent gaps in visuals caused by inline-block ) html （在list标记之间删除了空白，以防止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>

the link tag 链接标签

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

the javascript i tried the .attr() in different ways, also tried removing and resetting attributes with no luck. 我以不同的方式尝试了.attr（） 的javascript ，还尝试了删除和重置属性的过程，但是没有运气。 The alert is just to test if clicking is getting to the function, and yes, the website shows the alert every time I click on the link. 该警报只是为了测试是否单击了该功能，是的，每次我单击该链接时，网站都会显示警报。

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');
};

The link tag works, it's just not changing it's href when I click on the link. 链接标记有效，但是单击链接时并没有更改它的href 。 :( :(

Answer 1

Change onclick to this: 将onclick更改为此：

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

Currently, after running applyCSS, it follows the link and refreshes the page. 当前，在运行applyCSS之后，它将跟随该链接并刷新页面。 "return false" will prevent that behavior. “ return false”将阻止该行为。

Answer 2

here is example to show you how to do this its great because even with refresh it stay on the last theme you selected 这是向您展示如何做到这一点的示例，因为即使刷新，它仍会停留在您选择的最后一个主题上

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

and here is the code for the js file BCo.js 这是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
} 
}

also just incase you want to do fast check here is the code for the style1.css and style2.css 同样以防万一，如果您想快速检查，这里是style1.css和style2.css的代码

style1.css code style1.css代码

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

style2.css code style2.css代码

h1 {
color: #7c7c7c;
}

Answer 3

You could try a PHP approach. 您可以尝试使用PHP方法。

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

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

  default:
  $theme_file = 'red.css';

}

Then with HTML, all you'd need is: 然后，使用HTML，您所需要做的就是：

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

If can set cookies with this method so that the theme will be remembered when the user returns, or if you're working with a database you could store it permanently. 如果可以使用此方法设置cookie，以便在用户返回时可以记住主题，或者如果您正在使用数据库，则可以将其永久存储。

点击<a>标签后</a>如何更改CSS链接<a>？</a>

问题描述

3 个解决方案

解决方案1
6 已采纳 2013-10-20 00:43:43

解决方案2
1 2013-10-20 01:14:22

解决方案3
-1 2013-10-20 01:15:39

点击<a>标签后</a>如何更改CSS链接<a>？</a>

问题描述

3 个解决方案

解决方案1 6 已采纳 2013-10-20 00:43:43

解决方案2 1 2013-10-20 01:14:22

解决方案3 -1 2013-10-20 01:15:39

解决方案1
6 已采纳 2013-10-20 00:43:43

解决方案2
1 2013-10-20 01:14:22

解决方案3
-1 2013-10-20 01:15:39