本文为本人（Maggie）原创，转载请标明出处～
1、开关switch实现
效果
如图，实现一开关效果，鼠标点击可切换状态：
思路
- 两种状态，on和off
- off时，背景灰色，左边圆深灰色，右边圆与背景同色以实现隐藏
- on时，背景绿色，右边圆白色，左边圆与背景同色以实现隐藏
- 初识时状态为off，为整个开关绑定一个click事件，用来toggleClass（交换on和off）
代码
<style>
.switch
{
display: flex;
border: solid 1px #aaa;
width: 62px;
height: 32px;
background: #ccc;
}
.button
{
margin: 2px;
width: 28px;
height: 28px;
cursor: pointer;
}
.round
{
border-radius: 16px;
}
.off
{
background: #ddd;
}
.off div:first-child {
background: #aaa;
}
.off div:last-child {
background: transparent;
}
.on
{
background: #3a7;
}
.on div:first-child {
background: transparent;
}
.on div:last-child {
background: #fff;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready( function () {
$(".button").click( function() {
$(".switch").toggleClass("on", "off");
});
});
</script>
<div class="switch round off">
<div class="button round"></div>
<div class="button round"></div>
</div>
2、list鼠标交互列表（纯CSS实现）
效果
如图，鼠标放上时列表会有颜色、形状的变化
思路
- :hover实现鼠标悬浮
- :first-child、:last-child选中第一个孩子和最后一个孩子
代码
版本1：
<style>
* {
font-family: "Calibri";
font-size: 1.05em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 20em;
}
li div:first-child {
padding: .5em 0 0 1em;
width: 1.5em;
height: 2em;
border: solid 1px red;
border-radius: 2em;
color: red;
transition: all 0.5s ease-in-out;
}
li div:last-child {
position: relative;
top: -2em;
left: 3em;
width: 8em;
}
li:hover div:first-child {
width: 8.5em;
text-align: left;
color: white;
background: red;
}
li:hover div:last-child {
color: white;
}
</style>
<div>
<ul>
<li><div>1</div><div>apple</div></li>
<li><div>2</div><div>orange</div></li>
<li><div>3</div><div>pear</div></li>
</ul>
</div>版本2:（flex实现）
<style >
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
li{
position: relative;
left: 0;
display: flex;
}
li div:first-child
{
display: flex;
text-indent: 1.2rem;
align-items: center;
width: 3rem;
height: 3rem;
color: orange;
border: solid 2px orange;
border-radius: 2rem; /*所有的边长*/
transition: all 0.5s ease-in-out;
}
li div:last-child
{
display: flex;
align-items: center;
height: 3rem;
position: absolute;;
left:4rem;
}
li:hover div:first-child
{
background: crimson;
color:white;
width: 10rem;
}
li:hover div:last-child
{
color:white;
}
</style>
<div>
<ul>
<li><div>1</div> <div>apple</div></li>
<li><div>2</div> <div>orange</div></li>
<li><div>3</div> <div>pear</div></li>
</ul>
</div>
3、动态交互菜单栏
效果
如图，点击主菜单栏menu item时会展开子菜单栏，并收起其它菜单栏：
思路
- 自定义属性parent
- 点击添加类active并下拉，同时上滑原有active类
- .attr获取元素id，[parent=${id}]进行判断，实现点击哪个menu item，就展开它对应的子菜单
代码
<style>
*{
font-family: "Segoe UI Light";
font-size:1.2rem; /*150%，百分比存在问题，跟屏幕大小有关*/
}
ul,li{
list-style: none;
margin:0;
padding: 0;
}
.menu{
width: 16rem;
background: crimson;
}
li{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer; /*光标由插入改为可点*/
}
.menu > li{ /*menu下直接的li子元素*/
height: 2.5rem;
color: white;
}
.submenu > li{ /*menu下直接的li子元素*/
height: 2rem;
color: white;
font-size: 1rem;
background: #f08890;
}
.submenu{
display: none;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
$(".menu>li").click(function(){
$(".active").slideUp();
var id =$(this).attr("id");
$(`.submenu[parent=${id}]`).addClass("active").slideDown();
});
});
</script>
<div>
<ul id="main" class="menu">
<li id="p1">menu item1</li>
<ul class="submenu" parent="p1"> <!--parent是自定义的属性-->
<li>submenu1 item1</li>
<li>submenu1 item2</li>
<li>submenu1 item3</li>
</ul>
<li id="p2">menu item2</li>
<ul class="submenu" parent="p2">
<li>submenu2 item1</li>
<li>submenu2 item2</li>
<li>submenu2 item3</li>
<li>submenu2 item4</li>
</ul>
<li id="p3">menu item3</li>
<ul class="submenu" parent="p3">
<li>submenu3 item1</li>
<li>submenu3 item2</li>
<li>submenu3 item3</li>
</ul>
</ul>
</div>
4、交互动态导航栏
效果
如图，点击的导航栏呈现橙色，并且下方会显示其对应的段落内容；
鼠标悬停的导航栏呈天蓝色；
没有任何操作的导航栏呈浅绿色。
思路
- 初始时显示第一段（即设置为active），其它设置为none
- .hover 设置颜色变化
- event.preventDefault() 阻止缺省事件
- .attr获取属性，展现导航栏对应的段落内容，同时隐藏其它段落。
代码
<style>
*{
font-family: "Segoe UI Light";
font-size:1.2rem; /*150%，百分比存在问题，跟屏幕大小有关*/
}
ul,li{
list-style: none;
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
.tab>ul{ /*使仅对导航有效*/
display: flex;
}
.tab>ul a{ /*为a而不是li做样式，因为可点击的是a元素，让它去找父元素很麻烦*/
display: flex;
align-items: center;
padding:0 1.5rem;
height: 3rem;
color: white;
background: lightgreen;
}
.tab>ul a:hover{
background: skyblue;
}
.tab>div{
display: none;
}
.tab>div.active{
display: block;
}
.tab>ul a.active{
background: orange;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
$(".tab>ul a").click(function(event){
event.preventDefault(); //阻止缺省事件
$(".tab>ul a.active").removeClass("active");
$(this).addClass("active");
$(".tab>div.active").removeClass("active").hide();
var id=$(this).attr("href");
$(`.tab>div[id=${id}]`).addClass("active").show();
});
});
</script>
<div class="tab">
<ul>
<li><a href="p1" class="active">Paragraph1</a></li>
<li><a href="p2">Paragraph2</a></li>
<li><a href="p3">Paragraph3</a></li>
</ul>
<div id="p1" class="active">
Harry Potter is a series of seven fantasy novels written by the British author J. K. Rowling. The series, named after the titular character, chronicles the adventures of a young wizard, Harry Potter, and his friends Ronald Weasley and Hermione Granger, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's quest to overcome the Dark wizard Lord Voldemort, who aims to become immortal, conquer the wizarding world, subjugate non-magical people, and destroy all those who stand in his way, especially Harry Potter.
</div>
<div id="p2">
Since the release of the first novel, Harry Potter and the Philosopher's Stone, on 30 June 1997, the books have gained immense popularity, critical acclaim, and commercial success worldwide.[2] The series has also had some share of criticism, including concern for the increasingly dark tone. As of July 2013, the book series had sold between 400 and 450 million copies, making it the best-selling book series in history, and had been translated into 73 languages.[3][4] The last four books consecutively set records as the fastest-selling books in history, with the final instalment selling approximately 11 million copies in the United States within the first twenty-four hours of its release.
</div>
<div id="p3">
A series of many genres, including fantasy, coming of age, and the British school story, (with elements of mystery, thriller, adventure, and romance), it has many cultural meanings and references.[5] According to Rowling, the main theme is death.[6] There are also many other themes in the series, such as prejudice and corruption.[7]
</div>
</div>