需求描述:
按照要求实现如下页面功能效果
当点击下图黑色框时,页面主题如下:
当点击下图绿色框时,页面主题如下:
当点击下图红色框时,页面主题如下:
请用JavaScript 实现上述描述的效果
提示:
-
在
head
标签中的link
标签引入不同的css文件,展示的就是不同的主题效果如:
<link href="css/black.css" rel="stylesheet" type="text/css"/>
就是黑色主题效果<link href="css/red.css" rel="stylesheet" type="text/css"/>
就是红色主题效果<link href="css/green.css" rel="stylesheet" type="text/css"/>
就是绿色主题效果 -
给
ul
标签里的li
标签加class="current"
属性,矩形框就有被选中的状态,如下图
实现思路:
- 获取
li
元素对象- 根据
id="red"
获取li
元素对象 - 根据
id="green"
获取li
元素对象 - 根据
id="black"
获取li
元素对象
- 根据
- 根据
link
标签名获取元素对象数组,并获得索引是0的元素对象 - 给上一步获取的每一个元素对象绑定点击事件
- 给第二步获取的元素对象的
href
属性设置对应的 css文件路径 - 将对应的矩形框的className属性值设置为
current
,其他矩形框的className属性值设置为 “”
- 给第二步获取的元素对象的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换网页皮肤</title>
<style>
body, ul, li {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font: 12px/1.5 Tahoma;
}
li {
list-style-type: none;
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#outer {
width: 500px;
margin: 0 auto;
overflow: hidden;
zoom: 1;
}
#skin, #nav {
overflow: hidden;
zoom: 1;
}
#skin {
margin: 10px 0;
}
#skin li {
float: left;
width: 6px;
height: 6px;
cursor: pointer;
overflow: hidden;
margin-right: 10px;
text-indent: -9999px;
border-width: 4px;
border-style: solid;
}
#skin li.current {
background: #fff !important;
}
#red {
border-color: red;
background: red;
}
#green {
border-color: green;
background: green;
}
#black {
border-color: black;
background: black;
}
#nav {
border: 1px solid #fff;
}
#nav li {
float: left;
width: 82px;
line-height: 25px;
text-align: center;
border-right: 1px solid #fff;
}
#nav li.last {
width: 83px;
border-right-width: 0;
}
#nav li a {
color: #fff;
}
</style>
<link href="css/black.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="outer">
<ul id="skin">
<li id="red" title="红色">红</li>
<li id="green" title="绿色" >绿</li>
<li id="black" class="current" title="黑色">黑</li>
</ul>
<ul id="nav">
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">娱乐</a></li>
<li><a href="javascript:;">体育</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">音乐</a></li>
<li class="last"><a href="javascript:;">旅游</a></li>
</ul>
</div>
<script>
/*
blank.css 样式文件是黑色的皮肤样式
red.css 样式文件是红色的皮肤样式
green.css 样式文件是绿色的皮肤样式
点击【红】 将link标签的href属性值设置为 css/red.css
点击【黑】 将link标签的href属性值设置为 css/blank.css
点击【绿】 将link标签的href属性值设置为 css/green.css
*/
var r= document.getElementById("red");
var g= document.getElementById("green");
var b= document.getElementById("black");
var link= document.getElementsByTagName("link")[0];
r.onclick=function(){
link.href="css/red.css";
r.className = "current";
g.className = "";
b.className = "";
}
g.onclick=function(){
link.href="css/green.css";
r.className = "";
g.className = "current";
b.className = "";
}
b.onclick=function(){
link.href="css/black.css";
r.className = "";
g.className = "";
b.className = "current";
}
</script>
</body>
</html>