jquery+CSS text-transform 属性实现切换选项卡效果

作者:袖梨 2022-06-25

Css有个这么好的属性就是text-transform:uppercase。

这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个“词”。

none默认。定义带有小写字母和大写字母的标准的文本。capitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义无大写字母,仅有小写字母。inherit规定应该从父元素继承 text-transform 属性的值。

所有浏览器都支持 text-transform 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

 代码如下 复制代码



 Google Play's minimal tabs with CSS3 & jQuery - demo
  


 

 


     

         

Lorem ipsum sit amet


         

Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.


         

Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.


         

Pellentesque habitant


         

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

   
     

     

         

Vivamus fringilla suscipit justo


         

Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.


         

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula

         

Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.

   
     

     

         

Phasellus non nibh


         

Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.


         

Duis pulvinar nibh vel urna


         

Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet.


         

Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et.


     

     

         

Cum sociis natoque penatibus


         

Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.


         

Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.


         

Imperdiet sem interdum nec


         

Mauris rhoncus tincidunt libero quis fringilla.

   
     

 

 
 

Back to article / Drop me a message on Twitter!

 

 

 
 

效果

相关文章

精彩推荐