当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

js和css实现隐藏指定内容元素

发表:管理员  发表时间:2020-10-18 22:58:34   阅读:(3159)次  

在web前端开发过程中,我们可以通过js和css来实现隐藏指定的内容元素,从而实现我们只显示某些内容的目的。

css的演示demo:

<style type="text/css">

.cm:nth-child(n+10){display:none;}

</style>

<div class="cm">文字1</div>

<div class="cm">文字2</div>

<div class="cm">文字3</div>

<div class="cm">文字4</div>

<div class="cm">文字5</div>

<div class="cm">文字6</div>

<div class="cm">文字7</div>

<div class="cm">文字8</div>

<div class="cm">文字9</div>

<div class="cm">文字10</div>

<div class="cm">文字11</div>

<div class="cm">文字12</div>

<div class="cm">文字13</div>

注::nth-child是css选择器,n+10表示9以上的元素。


js的演示demo:

<script src="//www.phpweb.com.cn/base/js/base.js"></script> 

<div class="cm">文字1</div>

<div class="cm">文字2</div>

<div class="cm">文字3</div>

<div class="cm">文字4</div>

<div class="cm">文字5</div>

<div class="cm">文字6</div>

<div class="cm">文字7</div>

<div class="cm">文字8</div>

<div class="cm">文字9</div>

<div class="cm">文字10</div>

<div class="cm">文字11</div>

<div class="cm">文字12</div>

<div class="cm">文字13</div>


<script>

if($('.cm').length>9){

  $('.cm').each(function(){

   if($(this).index()>=9){

    $(this).hide()

   }

  })

 }

 </script>


 

假如我们资讯/文章对您有所帮助,您可以通过扫描捐赠二维码支持一下我们~

感谢您对我们的支持,您的小小支持让我们有信心走得更远!

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证