石家庄网站建设,石家庄网站制作,石家庄建网站公司,二亩地专业网站建设
服务热线: 133 9303 5011
0311-85040507
JQuery在导航特效中的经典使用案例
发布时间:2011-10-06

html原文件

<html>
<head>
 <title>网页选项卡</title>
 <link rel="stylesheet" type="text/css" href="card.css">
 <script src="jquery.js"></script>
 <script src="card.js"></script>
</head>
<body>
 <div id="main">
  <div id="tit">
   <h3 class="titin"><a href="card.php?cid=1">第一页</a></h3>
   <h3><a href="card.php?cid=2">第二页</a></h3>
   <h3><a href="card.php?cid=3">第三页</a></h3>
 
  </div>
  <div id="content">
内容区域
  </div>
 </div>

</body>
</html>

 

css源文件

 

body{
 font-size:12px;
 
}
#main{
 width:300px;
 height:200px;
 background:#ddd;
 margin:0 auto;
 
}
#main h3{
 width:80px;
 height:25px;
 line-height:25px;
 background:#cecece;
 float:left;
 text-align:center;
 font-size:14px;
 margin:3px 5px 0 0; 
 padding:0px;
 border:solid 2px #fff;

}
h3 a{
 color:white;
}
#content{
 background:#888; 
 float:left;
 width:300px;
 height:167px; 
 
}
#tit .titin{
 margin-left:3px;
 border-bottom:2px solid #888;
 background:#888;
}

js脚本源文件

$(function(){
 $("#main #tit h3").mouseover(function(){
  $(this).addClass("titin").siblings("h3").removeClass("titin"); 
 }).mouseout(function(){

 });
});

 

此外期中的一个引用jquery脚本库可以从官方下载,也可以点击此处下载jquery.js

预览效果如

 

 



上一篇:关于石家庄网站建设公司PHP环境搭建的问题 下一篇:Apache服务器安装目录下的文件说明
最新资讯 更多>>
  • 1  企业网站品牌网络推广出现的误区以    06-23
  • 2  我所理解的网站建设的关键所在    06-23
  • 3  网站好域名的十大原则    06-23
  • 4  经营性网站与非经营性网站区别    06-23
  • 5  网站的首页该放哪些元素?    06-23
  • 6  如何鉴别一个企业网站的好坏    06-23
  • 7  如何鉴别一个建站公司的优劣    06-23
  • 8  三合一网站    06-23
  • 9  为什么石家庄做网站那么便宜?    06-23
  • 10  网站为什么不是永久的?为什么以后    06-23
  • 11  网站建设中哪些问题容易引起客户反    06-23
  • 12  做网站需要多长时间    06-23
  • 部分客户 更多>>
  • 1  石家庄新华区江昇机械厂[www.sjzjs    07-17
  • 2  石家庄新华区江昇机械厂[www.sjzjs    07-17
  • 3  石家庄隆升机械有限公司[www.sjz-l    07-17
  • 4  石家庄市泽汇投资管理有限公司[www    07-17
  • 5  某英文外贸网站[www.cntilin.com]    07-17
  • 6  论坛型实例[www.ermudi.com]    07-17
  • 7  河北省兴秦投资管理有限公司[www.h    07-17
  • 8  增景防腐木业有限公司[www.zjffm.c    07-17
  • 9  绿舟环境科学研究所[www.lvzhou360    07-17
  • 10  河北众兴律师事务所 [zhongxinglvs    06-22
  • 11  中国反传销网 [madai120.com]    06-10
  • 12  石家庄市碧洲商贸有限公司 [bizhou    06-10
  • 常见问题 更多>>
  • 1  怎样提高网站的用户体验度    12-22
  • 2  门户行业的网站建设    12-22
  • 3  网站优化到底是怎么一回事?    06-23
  • 4  什么是备案    06-18
  • 5  什么样的网站是顾客喜欢的?    06-18
  • 6  网站建设价格贵吗?    06-18
  • 7  网站建设讲究得体    06-18
  • 8  外地客户可以找你做网站吗?    06-18
  • 9  什么是网站空间?    06-18
  • 10  外贸网站建设中需要注意的问题    06-18
  • 11  网站建设中要避免链接引起的错误    06-03
  • 12  小白在建设企业网站中要注意这些    06-03
  • 133 9303 5011
    0311-85040507