- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- QQ好友练习
- </title>
- <style>
- section{ margin: 0 auto; width: 200px; } section h2{ margin: 0; font:
- 18px/30px "微软雅黑"; text-align: center; background: #C7CED6 url(img/ico1.gif)
- no-repeat 30px 10px; border: 2px solid rgba(0,0,0,0.5); cursor: pointer;
- } .imgnow{ background: #DBFFA7 url(img/ico2.gif) no-repeat 30px 10px; }
- section ul{ list-style: none; padding: 0; margin: 0; font: 14px/20px "微软雅黑";
- text-indent: 25px; } section ul li{ border: 1px solid rgba(0,0,0,0.2);
- cursor: pointer; } .lisbgc{ background-color: #B5B5B5; }
- </style>
- </head>
- <body>
- <section>
- <h2>
- 我的好友
- </h2>
- <ul>
- <li>
- 鬓如霜
- </li>
- <li>
- 鬓如霜
- </li>
- <li>
- 鬓如霜
- </li>
- <li>
- 鬓如霜
- </li>
- </ul>
- </section>
- <section>
- <h2>
- 企业好友
- </h2>
- <ul>
- <li>
- 月如钩
- </li>
- <li>
- 月如钩
- </li>
- <li>
- 月如钩
- </li>
- <li>
- 月如钩
- </li>
- </ul>
- </section>
- <section>
- <h2>
- 黑名单
- </h2>
- <ul>
- <li>
- 发如雪
- </li>
- <li>
- 发如雪
- </li>
- </ul>
- </section>
- <script>
- var secs = document.querySelectorAll('section');
- var h2s = document.querySelectorAll('h2');
- var uls = document.querySelectorAll('ul');
- var lis = document.querySelectorAll('li');
- //所有的ul隐藏
- function ulsnone() {
- for (var j = 0; j < uls.length; j++) {
- uls[j].style.display = 'none';
- }
- }
- //清空所有的h2的classname
- function h2snoclass() {
- for (var j = 0; j < h2s.length; j++) {
- h2s[j].className = '';
- }
- }
- //清空所有的li的classname
- function lisnoclass() {
- for (var i = 0; i < lis.length; i++) {
- lis[i].className = '';
- }
- }
- ulsnone();
- //点击h2的时候显示所有的ul
- for (var j = 0; j < h2s.length; j++) {
- h2s[j].index = j;
- h2s[j].onclick = function() {
- ulsnone();
- if (this.className == '') {
- h2snoclass();
- uls[this.index].style.display = 'block';
- h2s[this.index].className = 'imgnow';
- } else {
- uls[this.index].style.display = 'none';
- h2s[this.index].className = '';
- }
- }
- }
- //点击每个li的时候实现高亮
- for (var i = 0; i < lis.length; i++) {
- lis[i].index = i;
- lis[i].onclick = function() {
- if (this.className == '') {
- lisnoclass();
- lis[this.index].className = 'lisbgc';
- } else {
- lisnoclass();
- lis[this.index].className = '';
- }
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/48009/ced35584662e3d0f3b53fd21b216e299.html