如何在点击 <a> 标签时更改 CSS 链接
How to change CSS link on click of <a> tag?
我已经尝试了几个小时来让我的锚标签工作,如果单击,它会更改指向颜色主题 CSS 的链接href
。
这是我到目前为止得到和发现的。我只是想把它改成红色主题。
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');
};
链接标签有效,只是当我单击链接时它不会改变它href
。 :(
将 onclick 更改为:
onclick="applyCSS('css/theme_red.css'); return false;"
目前,运行 applyCSS 后,它会跟随链接并刷新页面。"返回 false"将阻止该行为。
这是向您展示如何做到这一点的示例,它很棒,因为即使刷新它也会停留在您选择的最后一个主题上
<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
样式1.css代码
h1 {
font-family: Tahoma,arial;
font-size: 18px;
font-weight: bold;
line-height: 20px;
color: #1D828C;
}
样式2.css代码
h1 {
color: #7c7c7c;
}
你可以简单地使用Css,你可以在这个链接中找到它,
.HTML:
<a href="#" tabindex="1">Stays blue</a>
.CSS:
a {
color: black;
}
a:active {
color: blue;
}
a[tabindex]:focus {
color:blue;
outline: none;
}
你可以尝试一个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>
如果可以使用此方法设置 cookie,以便在用户返回时记住主题,或者如果您正在使用数据库,则可以永久存储它。
相关文章:
- D3带标签的箭头链接
- 在新标签上打开链接,IE7-8和safari所有版本都无法使用
- 链接问题:下一个字符包含在<a>TinyMce ui TinyMce中的标签
- 按钮标签,javascript 转换为链接标签
- 需要查找和替换链接标签
- 使用animate将标签链接锚定到不同页面上的ID
- 如何将主题标签链接集成到网页中并基于该哈希标签加载模态
- 我的 h1 标签链接在悬停时会显示一个下划线,我没有添加
- 锚定标签链接向下滚动太远,但仅在移动设备上
- 将标签链接移动到博客的右侧
- 不能左键点击到锚标签链接
- 在
内动态添加span标签链接 - Chrome扩展点击标签链接
- 如何防止散列标签链接滚动页面?
- 引导标签链接不工作
- 当在JS浏览器中输入url时,偏移一个散列标签链接以调整固定的标题
- 防止嵌套标签链接,但更改复选框状态
- 如何做facebook API登录使用锚标签链接使用Javascript功能?给定在<a href="&q
- Jquery标签链接系统(显示用户所在的页面)
- Accordion JS不会从标签链接打开