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>
    



  • 相关阅读:
    初识人工智能(一):数据分析(三):numpy科学计算基础库(二)
    Python3标准库:urllib.parse分解URL
    Python3标准库:selectors I/O多路复用抽象
    Python3标准库:ipaddress Internet地址
    初识人工智能(一):数据分析(二):numpy科学计算基础库(一)
    Python3标准库:concurrent.futures管理并发任务池
    初识人工智能(一):数据分析(一):matplotlib绘图库
    Python3标准库:asyncio异步I/O、事件循环和并发工具
    Python3标准库:multiprocessing像线程一样管理进程
    Python3标准库:threading进程中管理并发操作
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3028998.html
Copyright © 2011-2022 走看看