首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

容易示例教会你 jquery样式设置

2013-04-02 
简单示例教会你 jquery样式设置 htmlheadmeta charsetutf-8/ style.high{font-style:italicfo

简单示例教会你 jquery样式设置

 

<html>
<head>
<meta charset="utf-8"/>
 <style>
  .high{
   font-style:italic;
   font-weight:bold;
  }
  .hide{
   display:none;
  }
 </style>
 <script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
 <script>
  /*样式的操作*/
  $(function(){
   /*1,attr()设置样式
    $("p").click(function(){
     $(this).attr("class","high");
    });
   */
   /*2,addClass()
    $("p").click(function(){
     $(this).addClass("high");
    });
   */
   //3,removeClass()
   $("p").removeClass("high");
   //4,toggleClass() 如果你有这个class属性我就删除,如果没有就增加
   $("p").toggleClass("hign");
  })
 </script>
</head>

<body>
 <p class="high" title="选择你最喜欢的水果">你最喜欢的水果</p>
 <ul>
  <li title="橙子">橙子</li>
  <li title="苹果">苹果</li>
  <li title="香蕉">香蕉</li>
 </ul>
</body>
</html>

热点排行