zoukankan      html  css  js  c++  java
  • jquery实战视频教程_选项卡效果一

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jquery实战视频教程_选项卡效果一</title>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
    	
    	$('.ct:gt(0)').hide();
    	
    	var hdw = $('.box ul li');
    	
    	hdw.hover(function(){
    		
    		$(this).addClass('two')
    				.siblings().removeClass('two');
    		
    		
    		
    		
    		
    		
    		});
    	
    	
    	
    	
    	
    	
    	
    	hdw.click(function(){
    		
    		$(this).addClass('one')
    				.siblings().removeClass();
    		
    		
    	var hdw_index = hdw	.index(this);
    	
    	$('.ct').eq(hdw	.index(this)).show()
    			.siblings().hide();
    		
    		
    		
    		});
    
    	});
    
    
    
    
    </script>
    
    <style type="text/css">
    * { padding:0; margin:0;}
    body { font-size:12px; padding:100px;}
    ul { list-style-type:none;}
    .box ul { height:30px; line-height:30px;}
    .box ul li { float:left; padding:0 10px; position:relative; cursor:pointer; border:1px solid #000; margin-right:5px; border-bottom:none;}
    
    .box ul li.two { background:orange;}
    
    
    
    .content { 325px; border:1px solid #000; padding:10px; height:100px;}
    
    * html .content { margin-top:-1px;}
    
    
    .box ul li.one { background:#fff;}
    
    
    
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <div class="box">
    <ul>
    <li class="one">课程介绍</li>
    <li>报名流程</li>
    <li>常见问题</li>
    </ul>
    <div class="content">
    <div class="ct">随着移动互联网的兴起,互联网行业正向更加智能化的Web3.0时代迈进,中国互联网行业进入了高速发展的势态,PHP语言已经为大部分企业广泛应用和重视(如:新浪、百度、腾讯、TOM、淘宝、搜狐、网易等)PHP语言是各大IT公司首选的互联网编程语言。PHP开发优势明显,未来发展空间巨大,IT行业急需PHP开发人才。 </div>
    <div class="ct">这里有后盾名学员对后盾网视频的评价,来后盾培训是你一生不悔的选择.用一个比喻来讲:后盾网实训课程不光是教你怎样开汽车,更是传授你如何制造汽车的技能.让学员自己能开发一个完整的框架产品,从深层次上掌握PHP的应用,这是后盾独有的。 </div>
    <div class="ct">PHP主讲老师具有多年项目开发经验及企业培训经验,打造企业需要的人才. 就业老师提供给学员职业素质、职业经验、职业技能等全方位就业指导。 </div>
    
    
    </div>
    
    
    </div>
    
    </body>
    </html>
    



  • 相关阅读:
    每日一水 POJ8道水题
    编译和使用 MySQL C++ Connector
    j2ee model1模型完成分页逻辑的实现 详解!
    DB查询分析器访问EXCEL时,要在表名前后加上中括弧或双引号
    指向结构体变量的指针
    EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
    MybatisGen1.0 Mybatis JavaBean Mapper生成工具
    The table name must be enclosed in double quotation marks or sqare bracket while accessing EXCEL by
    资源-Android:Android
    软件-开发软件:Android Studio
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3028998.html
Copyright © 2011-2022 走看看