文章目录
1，运行效果2，代码干货1，运行效果
2，代码干货
<!doctype html><html><head><meta charset="utf-8"><title>button</title><style>html,body{width:100%;height:100%;margin:0;padding:0;font-family:"Microsoft YaHei", SimSun;}ul li{list-style:none;}.main-area{display:block;width:100%;height:80%;margin:0;padding:0;}.main-area .func-bar{display:inline-block;float:left;width:10%;height:100%;}.main-area .func-bar ul{width:98%;height:100%;padding:0;margin:1px 0px 1px 1px;border:solid 1px black;border-right:0;background-color:#9e9e9e;}.main-area .func-bar ul .selected{font-weight:bold;background-color:white;}.main-area .func-bar ul li:hover{background-color:#f5f5f5;}.main-area .func-bar ul li{display:block;left:0;right:0;height:30px;padding:1px;border-bottom:solid 1px black;text-align:center;line-height:30px;background-color:pink;}.main-area .show-area{display:inline-block;float:left;width:89%;height:100%;margin:1px 0px 1px 1px;border-bottom:solid 1px black;overflow:hidden;}.main-area .show-area ul{width:100%;height:100%;margin:0;padding:0;}.main-area .show-area ul li{width:100%;height:100%;margin:0;}</style></head><body><div class="main-area"><div class="func-bar"><ul id="id-func-buttons"><li>看图片</li><li>看小说</li><li>看视频</li><li>听音乐</li></ul></div><div class="show-area"><ul id="id-show-area"><li style="background:#fed400">看图片</li><li style="background:#b8d32b">看小说</li><li style="background:#00a5cc">看视频</li><li style="background:#a61366">听音乐</li></ul></div></div><script>window.onload = function(){EventUtils = {addEventListener : function(element, eventType, func){if(element.addEventListener) {//所有主流浏览器，除了 IE 8 及更早 IE版本element.addEventListener(eventType, func);}else if(element.attachEvent) {// IE 8 及更早 IE 版本element.attachEvent("on"+eventType, func);}else{element["on"+eventType] = func;}},moveEventListener : function(element, eventType, func){if(element.removeEventListener) {// // 所有浏览器，除了 IE 8 及更早IE版本element.removeEventListener(eventType, func);}else if(element.detachEvent) {// IE 8 及更早IE版本element.detachEvent("on"+eventType, func);}else{element["on"+eventType] = undefined;}},tirggerEvent : function(element, eventType){// IE浏览器if(document.all) {element[eventType]();}// 其它浏览器else {var e = document.createEvent("MouseEvents");e.initEvent(eventType, true, true);element.dispatchEvent(e);}},addEventForButtons : function(parentNode, eventType, func){lis = parentNode.getElementsByTagName("li");console.log(lis, eventType, func);for(var i=0; i<lis.length; i++){var node = lis.item(i);console.log(node);if(typeof(func) != "object"){EventUtils.addEventListener(node, eventType, func);continue;}for(var j=0; j<func.length; j++){fun = func[j];EventUtils.addEventListener(node, eventType, fun);}}}}addButtonsSelectEvent = function(event){element = event.target;lis = element.parentNode.children;for(var i=0; i<lis.length; i++){var node = lis[i];node.index = i;if(node == element && !node.classList.contains("selected")){node.classList.add("selected");}else if(node.classList.contains("selected")){node.classList.remove("selected");}}}selectAreaByButton = function(event){var showArea = document.getElementById("id-show-area");var y = event.target.index*100;showArea.style.transform="translateY(-" + y + "%)";console.log(y);}EventUtils.addEventForButtons(document.getElementById("id-func-buttons"), "click", [addButtonsSelectEvent, selectAreaByButton]);EventUtils.tirggerEvent(document.getElementById("id-func-buttons").children[2], "click");}</script></body></html>
