标签:for 联系 float 换肤 document listen tran selector 标签
首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3
我就直接上代码了(颜色可以自己调)。
HTML:
<nav> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独秀不爱秀</a></li> <li><a href="#">独秀不爱秀</a></li> </nav> <ul id="skin"> <li id="red"></li> <li id="green" class="current"></li> <li id="blue"></li> </ul>
CSS:
/* 公共部分 */ * { margin: 0; padding: 0; } html, body { font-size: 16px; transition: all 1s; } ul, nav { list-style: none; } /* 网页皮肤选择模块 */ #skin { margin-left: 100px; margin-top: 100px; } #skin li { width: 50px; height: 50px; color: #fff; line-height: 50px; text-align: center; border-radius: 50%; } #skin li + li { margin-top: 10px; } #skin #red { background-color: red; border: 25px solid red; } #skin #green { background-color: #009688bd; border: 25px solid #009688bd; } #skin #blue { background-color: blue; border: 25px solid blue; } #skin li.current { background-color: #fff!important; } #skin li:hover, #skin li:focus { background-color: #fff!important; } /* nav 模块 */ nav { width: 700px; height: 50px; margin: 100px auto; } nav li { width: 100px; height: 50px; float: left; line-height: 50px; text-align: center; transition: all 1s;
border: 1px solid #fff; } nav li + li { margin-left: 10px; } nav li a { color: #fff; text-decoration: none; } nav li a:hover, nav li a:focus { text-decoration: underline; }
green.css
body { background: #8bc34a; } nav li { background-color: #009688bd; }
red.css
body { background: #9e9e9e5e; } nav li { background-color: #ff5722eb; }
blue.css
body { background: #673ab7a6; } nav li { background-color: #03a9f4a3; }
JavaScript:
window.onload = () => { // 获取选择皮肤按钮 const skinLi = document.getElementById(‘skin‘).querySelectorAll(‘li‘); // 获取 link 标签 const cssLink = document.getElementById(‘link‘); for (let i = 0; i < skinLi.length; i++) { skinLi[i].addEventListener(‘click‘, () => { // 当点击每一个选择的时候先去除掉所有选择按钮的 class for (ele in skinLi) { skinLi[ele].className = ‘‘; } skinLi[i].className = ‘current‘; cssLink.href = `css/${skinLi[i].id}.css`; }); } };
标签:for 联系 float 换肤 document listen tran selector 标签
原文地址:https://www.cnblogs.com/duxiu-fang/p/11159332.html