星空网 > 软件开发 > Java

jQuery实现隐藏标签

要求:用户进入该页面时,品牌列表默认是精简显示,用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><!DOCTYPE html><html><head runat="server">  <meta name="viewport" content="width=device-width" />  <script src='/images/loading.gif' data-original="../../Scripts/jquery-2.2.3.js"></script>  <title>Index</title></head><body>  <div class="SubCategoryBox">    <ul>      <li><a href="#">佳能</a></li>      <li><a href="#">索尼</a></li>      <li><a href="#">三星</a></li>      <li><a href="#">尼康</a></li>      <li><a href="#">松下</a></li>      <li><a href="#">卡西欧</a></li>      <li><a href="#">富士</a></li>      <li><a href="#">柯达</a></li>      <li><a href="#">宾得</a></li>      <li><a href="#">理光</a></li>      <li><a href="#">奥林巴斯</a></li>      <li><a href="#">明基</a></li>      <li><a href="#">爱国者</a></li>      <li><a href="#">其他品牌相机</a></li>    </ul>    <div class="showmore">      <a href="#" id="C"><span>显示全部品牌</span></a>    </div>  </div>  <script>    var p = $("ul li:gt(7)");    p.hide();    $("#C").click(function(){      var q;      if(p.is(":visible")){        p.hide();        q=$(this).find('span').text("精简显示品牌");      } else {        p.show();                q=$(this).find('span').text('显示全部品牌');      }    });  </script></body></html>

显示效果:

jQuery实现隐藏标签

jQuery实现隐藏标签




原标题:jQuery实现隐藏标签

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

自发货跟卖fba:https://www.goluckyvip.com/tag/49684.html
自发货海外仓:https://www.goluckyvip.com/tag/49685.html
自发货和fba:https://www.goluckyvip.com/tag/49686.html
自发货和fba区别:https://www.goluckyvip.com/tag/49687.html
自发货转fba:https://www.goluckyvip.com/tag/49688.html
自发货转fba怎么转:https://www.goluckyvip.com/tag/49689.html
武陵山大裂谷周围景点 武陵山大裂谷周围景点图片:https://www.vstour.cn/a/411233.html
南美旅游报价(探索南美洲的旅行费用):https://www.vstour.cn/a/411234.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流