增加删除替换类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类的操作</title>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box");
btn01.onclick = function () {
toggleClass(box, "b2");
}
}
function addClass(obj, cn) {
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
function hasClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
function removeClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg, "");
}
function toggleClass(obj, cn) {
if (hasClass(obj, cn)) {
removeClass(obj, cn);
}
else {
addClass(obj, cn);
}
}
</script>
</head>
<style>
.b1 {
width: 100px;
height: 100px;
background-color: #bfa;
}
.b2 {
height: 200px;
background-color: rgb(231, 29, 140);
}
</style>
<body>
<button id="btn01">点击按钮以后修改box样式</button>
<br><br>
<div id="box" class="b1 b2"></div>
</body>
</html>
二级菜单.css
div.sdmenu {
width: 150px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url("../picture/clock.png") no-repeat right bottom;
color: rgb(228, 20, 20);
}
div.sdmenu div {
background:url("../picture/clock.png") repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url("../picture/clock.png") no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
height: 15px;
line-height: 15px;
overflow: hidden;
padding: 5px 25px;
font-weight: bold;
color: rgb(212, 22, 22);
background: url("../picture/clock.png") no-repeat 10px center;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image:url("../picture/tb\ \(1\).png");
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
text-decoration: none;
}
div.sdmenu div a.current {
background: #ccc;
}
div.sdmenu div a:hover {
background: #066 url("../picture/clock.png") no-repeat right center;
color: #fff;
}
二级菜单.js
function move(obj, attr, target, speed, callback) {
clearInterval(obj.timer);
var current = parseInt(getStyle(obj, attr));
if (current > target) {
speed = -speed;
}
obj.timer = setInterval(function () {
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue + speed;
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
obj.style[attr] = newValue + "px";
if (newValue == target) {
clearInterval(obj.timer);
callback && callback();
}
}, 30);
}
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
}
else {
return obj.currentStyle[name];
}
}
function addClass(obj, cn) {
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
function hasClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
function removeClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg, "");
}
function toggleClass(obj, cn) {
if (hasClass(obj, cn)) {
removeClass(obj, cn);
}
else {
addClass(obj, cn);
}
}
二级菜单.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,
img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
</style>
<link rel="stylesheet" type="text/css" href="./css/menu.css" />
<script type="text/javascript" src="./script/script.js"></script>
<script type="text/javascript">
window.onload = function() {
var menuSpan = document.querySelectorAll(".menuSpan");
var openDiv = menuSpan[0].parentNode;
for (var i = 0; i < menuSpan.length; i++) {
menuSpan[i].onclick = function() {
var parentDiv = this.parentNode;
toggleMenu(parentDiv);
if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
toggleMenu(openDiv);
}
openDiv = parentDiv;
};
}
function toggleMenu(obj) {
var begin = obj.offsetHeight;
toggleClass(obj, "collapsed");
var end = obj.offsetHeight;
obj.style.height = begin + "px";
move(obj, "height", end, 10, function() {
obj.style.height = "";
});
}
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">htaccess密码</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">推荐我们</a>
<a href="#">链接我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驱动</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">测试电流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>
JSON
json链接