jQuery實現單擊變換樣式
阿新 • • 發佈：2019-02-12
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>jQuer實現點選變換樣式</title>
<style>*{margin: 0;padding: 0;}
ul{width: 700px;margin:200px auto;}
ul li{display:inline;border:1px solid #dcdcdc;border-radius:10px;padding:7px 20px;font-size:24px;}
.add{background-color:#77c03a;border:none;color:#fff;}
</style>
</head>
<ul>
<li class="add">Full Black</li>
<li>Full Black</li>
<li>Full Black</li>
<li>Full Black</li>
</ul>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script><script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul li").click(function(){
$("ul li").removeClass("add");
$(this).addClass("add");
});
});
</script>
</body>
</html>