《HTML》
要链接jquery.min.js
<ul>
<li> 苹果 <i class="icon">√</i> </li>
<li>大西瓜<i class="icon">√</i></li> <!-- 当点击大西瓜的时候√是斜的 -->
<li>樱桃<i class="icon">√</i></li>
<li>香蕉<i class="icon">√</i></li>
<li>橘子<i class="icon">√</i></li>
<li>菠萝蜜<i class="icon">√</i></li>
</ul>
《css》
* {
margin:0;
padding:0;
}
ul {
width:100%;
margin-top:200px;
text-align:center;
font-size:0;
}
ul li {
display:inline-block;
padding:8px 20px;
font-size:14px;
color:#222;
border:1px solid #ddd;
margin-right:20px;
border-radius:4px;
position:relative;
cursor:pointer;
}
ul li.active:before {
content:'';
display:block;
height:0;
width:0;
font-size:0;
border:10px solid transparent;
border-right:10px solid #008028;
border-bottom:10px solid #008028;
position:absolute;
right:0;
bottom:0;
}
ul li.active {
border:1px solid #008028;
}
.icon {
display:none;
position:absolute;
color:#fff;
font-size:14px;
bottom:-1px;
right:2px;
}
ul li.active .icon {
display:block;
}
《js》
$(function() {
$("ul li").click(function() {
$(this).toggleClass('active');
})
})
