01-二级导航
javascript"><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 500px;height: 30px;margin: 30px auto;position: relative;}li {width: 100px;height: 30px;border: 1px solid #000;text-align: center;line-height: 30px;box-sizing: border-box;float: left;}li div {width: 500px;height: 300px;border: 1px solid #000;box-sizing: border-box;position: absolute;top: 30px;left: 0;display: none;}/* :hover */li:hover div {display: block;}</style>
</head><body><ul><li>1<div class="box">1</div></li><li>2<div class="box">2</div></li><li>3<div class="box">3</div></li><li>4<div class="box">4</div></li><li>5<div class="box">5</div></li></ul>
</body>
02-tab切换
javascript"> <style>* {margin: 0;padding: 0;list-style: none;}ul {width: 500px;height: 30px;margin: 30px auto 0;position: relative;}li {width: 100px;height: 30px;border: 1px solid #000;text-align: center;line-height: 30px;box-sizing: border-box;float: left;}.content {width: 500px;height: 302px;border: 1px solid #000;margin: 0 auto;position: relative;}.content .tab {width: 100%;height: 300px;position: absolute;top: 0;left: 0;display: none;}.content .active {display: block;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="content"><div class="tab active">1</div><div class="tab">2</div><div class="tab">3</div><div class="tab">4</div><div class="tab">5</div></div><script>// 点击li，展示对应的 tab 内容// 获取元素var list = document.getElementsByTagName("li");var tabs = document.getElementsByClassName("tab");for (var i = 0; i < list.length; i++) {// 保留 i 值list[i].index = i;list[i].onclick = function () {siblingFun();tabs[this.index].className = "tab active";}}// 排他函数function siblingFun() {for (var i = 0; i < tabs.length; i++) {tabs[i].className = "tab";}}</script>
03-匹配模式
javascript"><body><script>var reg = /abc/gi;var str = "defAbcgabcAbcABC";// test() 检测是否符合正则表达式的规则// console.log(reg.test(str));// console.log(reg.test(str));// i 忽略大小写// g 全局匹配// exec() 有匹配的值，则返回匹配值，否则返回 nullconsole.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));</script>
</body>
