jqury---单击时我们改变样式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>单击时我们改变样式</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
   <style type="text/css">
      #menu{
         width: 300px;
         }
                               //在css中编写#代表id   .代表class
      .classchild{
         background:yellow;
      }  
      
      hd{
          background:gray;
      }
      div{
        padding: 0;  margin: 10px 0;
       }
       
       div a{
         background:green;
       }
   </style>
   <script type="text/javascript" src="jqury/jquery-1.8.2.min.js"></script>
  </head>
  
  <body>
     <div id="menu">
        <span> 第一章   做人的基础</span>
        <a>原则</a>
        <a>方法</a>
        <a>总结</a>
     </div>
     
     <div class="classchild">
       <span>第二章   做人的准则</span>
       <a>原则</a>
        <a>方法</a>
        <a>总结</a>
     </div>
     
     <div class="classchild">
       <span>第三章  学会说话</span>
       <a>原则</a>
        <a>方法</a>
        <a>总结</a>
     </div>
     
     <script type="text/javascript">
        $(".classchild").click(function(){  //获得类名为classchild的元素集  添加单击事件
             $("this").addClass("hd")       //为当前集中对象添加hd类名 
                      .children("a").show()          //把当前对象的的a都显示出来
                      .end()                     //重新定位到上次操作的元素
                      .siblings()                //获得兄弟节点
                             .removeClass("hd")  //移除兄弟节点的hd类
                             .childern("a")      //获得兄弟节点的  a元素
                                     .hide();    //隐藏
                    
        })
        
     </script>
  </body>
</html>
代码未经检测    只提供思想


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
电子图书资源服务系统是一款基于 Java Swing 的 C-S 应用,旨在提供电子图书资源一站式服务,可从系统提供的图书资源中直接检索资源并进行下载。.zip优质项目,资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目。 本人系统开发经验充足,有任何使用问题欢迎随与我联系,我会及为你解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(若有),项目具体内容可查看下方的资源详情。 【附带帮助】: 若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步。 【本人专注计算机领域】: 有任何使用问题欢迎随与我联系,我会及解答,第一间为你提供帮助,CSDN博客端可私信,为你解惑,欢迎交流。 【适合场景】: 相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展来开发出更多功能 【无积分此资源可联系获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。积分/付费仅作为资源整理辛苦费用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值