jQuery-Class-Attribute 实例来了

刚才日志说了会有演示实例,那么这就来了哇。

直接上代码了,菜单还是使用的是上一次我日志中制作的菜单,但是这一次增加了部分 js 赋予页面动态的效果。使用了 toggleClass 。

代码拷贝即可运行,jQuery js 使用的是在线 js 不用自己再重新部署,不过请保证上网环境。否则会有问题。

后面会做更多的拓展,希望大家关注咯。

 

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery-Dom-classApp.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <style type="text/css">
      /* 根据颜色搭配搭配出好看的菜单,DEMO 配色比较纠结,大家谅解,
   下面来一个配好色的菜单,虽然是简单的设计但是通过合理的颜色搭配和布局就能得到非常好的效果 */
   .ul-shadow-navi-container{
    margin: 50px auto;
    padding: 0 20px;
    width: 300px;
    height: 40px;
    background-color: #f3f5f8;
   }
   
   /* 设置 padding 消除内部边框 */
   .ul-shadow-navi-container ul{
    margin: 0;
    padding: 0;
    list-style: none;
   }
   
   /* 精确控制每一个像素 22 + 4*2 + 10  */
   .ul-shadow-navi-container ul li{
    float: left;
    width: 60px;
    height: 26px;
    margin: 0 2px ;
    border-top: 6px solid #c7d1e0; 
    padding: 4px;
    background-color: #f3f5f8;
    cursor: pointer;
    text-align: center;
    font-family: "微软雅黑";
   }
   
   /* 通过 border 控制一定要控制 border-top 否则默认格式会顶着 top */
   .ul-shadow-navi-container ul li:HOVER {
    border-top-color: #6173a3;
    background-color: #6173a3;
    color: white;
   }
   
   /* 选中样式 */
   .ul-shadow-navi-container ul li.selected {
    border-top-color: #6173a3;
    background-color: #6173a3;
    color: white;
   }
   
  </style>
  <script type="text/javascript">
   $(document).ready(function(){
    // 按钮点击事件,通过 toggleClass 来进行 class 的选择
    $(".ul-shadow-navi-container").delegate("li","click",function(event){
     $(this).parent().find(".selected").toggleClass("selected");
     $(this).toggleClass("selected");
    });
   });
  </script>
  </head>
  
  <body>
  <div class="ul-shadow-navi-container">
   <ul>
    <li class="selected">2000</li>    
    <li>2001</li>
    <li>2002</li>
    <li>2003</li>
   </ul>
  </div>
  </body>
</html>

你可能感兴趣的:(jquery,dom,的修改,对于,toggleClass,jQuery制作水平菜单,实现效果切换,水平菜单)