Home >Web Front-end >HTML Tutorial >商品显示模式切换_html/css_WEB-ITnose
商品显示模式切换_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:50:131127browse
一个简单的商品显示模式切换功能
通过学习 锋利的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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：這是為什麼呢？求解答，謝謝！_html/css_WEB-ITnoseNext article：固定网页页脚的最佳方法（译）_html/css_WEB-ITnose