簡単な商品表示モード切り替え機能
学習して学ぶ sharp jquery(edit 2)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding:0; } div.container{ margin: 0 auto; width: 400px; background-color: #ffd45a; } ul{ overflow: hidden; } li{ float: left; width: 100px; text-align: center; list-style-type: none; } a{ display: block; } div#btn{ width: 400px; text-align: center; margin: 0 auto; } </style> <script src="javascript/jquery-2.2.3.min.js"></script></head><body> <div class="container"> <ul> <li><a href="">APPLE</a></li> <li><a href="">SONY</a></li> <li><a href="">SUM</a></li> <li><a href="">LG</a></li> <li><a href="">MEIZU</a></li> <li><a href="">MI</a></li> <li><a href="">OPPO</a></li> </ul> </div> <div id="btn"><a href="" class="btn">显示全部商品</a> </div> <script> $(function () { var $hi=$("ul li:nth-of-type(n+4)").hide(); $("a.btn").click(function () { if($("a.btn").text()=="显示全部商品"){ $hi.show(); $("a.btn").text("显示精简模式"); } else if ($("a.btn").text()=="显示精简模式"){ $hi.hide(); $("a.btn").text("显示全部商品"); } return false; }) })</script></body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
