关于网页皮肤切换

最新推荐文章于 2022-05-16 23:10:27 发布

iteye_18480

最新推荐文章于 2022-05-16 23:10:27 发布

阅读量274

点赞数

文章标签： javascript ViewUI

今天用两种方法实现了简单的页面皮肤切换，一种用原生的js,一种用jQuery简单的方法

<!DOCTYPE html>
<html>
<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 type="text/css" rel="stylesheet" id="link" href="green.css"/>
<script type="text/javascript">
window.οnlοad=function()
{
var oLink = document.getElementsByTagName("link")[0];
var oSkin = document.getElementById("skin").getElementsByTagName("li");
for(var i =0; i< oSkin.length; i++)
{
oSkin[i].οnclick=function(){
for(var p in oSkin)
oSkin[p].className="";
this.className="current";
oLink['href'] = this.id +".css";

}
}
}
</script>

</head>
<body>
<div id="outer">
<ul id="skin">
<li id="red" title="红色">红</li>
<li id="green" class="current" title="绿色"></li>
<li id="black" 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><a href="javascript:;" class="last">旅游</a> </li>
</ul>
</div>
</body>
</html>

这种方法主要是根据别人的教程案例学来的，根据这个，我用jQuery实现了同样的功能。

<!DOCTYPE html>
<html>
<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 type="text/css" rel="stylesheet" id="link" href="green.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#skin').find('li').click(function(){

$(this).addClass('current').siblings().removeClass('current');
$("#link").attr("href",$(this).attr('id')+".css");

})
})

</script>

</head>
<body>
<div id="outer">
<ul id="skin">
<li id="red" title="红色">红</li>
<li id="green" class="current" title="绿色"></li>
<li id="black" 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><a href="javascript:;" class="last">旅游</a> </li>
</ul>
</div>
</body>
</html>