jquery 自定义tab
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){ $("#a").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white");
$("p").css('display','none');
$("#po").css('display','block');
});
$("#b").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white"); $("p").css('display','none');
$("#po1").css('display','block');
});
$("#c").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white"); $("p").css('display','none');
$("#po2").css('display','block');
});
});
</script>
</head> <body>
<h2 id='a' >这是标题1</h2>
<h2 id='b'>这是标题2</h2>
<h2 id='c' >这是标题23</h2>
<p id='po' style="background-color:#ff0000">这是一个段落23。</p>
<p id='po1' style="background-color:#00ff00">这是一个段落2222。</p>
<p id='po2' style="background-color:#0000ff">这是一个段落。2222222</p>
<button>返回 p 元素的背景色</button>
</body>
</html>
简易版
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){ $("#a").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white");
$(".conlist").css('display','none');
$("#aa").css('display','block');
});
$("#b").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white"); $(".conlist").css('display','none');
$("#bb").css('display','block');
});
$("#c").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white"); $(".conlist").css('display','none');
$("#cc").css('display','block');
});
$("#d").mouseover(function(){
$(this).css("background-color","yellow");
$(this).siblings().css("background-color","white"); $(".conlist").css('display','none');
$("#dd").css('display','block');
});
});
</script> <div style="margin-top:4px;">
<ul class="news_tab" id="tab1">
<a id="a" href="http://www.ky007.com/kyxw/"><li class="selected" onmouseover="setTab(1,0,'selected','normal');" title="考研新闻">考研新闻</li></a>
<a id="b" href="bkxx/bkzn/"><li class="normal" onmouseover="setTab(1,1,'selected','normal');" title="报考指南">报考指南</li></a>
<a id="c" href="/kycs/"><li class="normal" onmouseover="setTab(1,2,'selected','normal');" title="考研常识">考研常识</li></a>
<a id="d" href="/kyzc/"><li class="normal" onmouseover="setTab(1,3,'selected','normal');" title="考研政策">考研政策</li></a>
</ul> <div id="tablist1">
<div class="conlist" id="aa"> <div class="ky_newsimg">
<a href="/2013/1030/24111.html" title="【大学毕业季】选择考研还是工作?" target="_blank"><img src="http://www.ky007.com/uploadfile/2013/1031/thumb_144_0_20131031094729199.jpg" width="144" height="94"/></a>
</div>
<div class="ky_newsp" >
<h3><a href="/2013/1030/24111.html" target="_blank">【大学毕业季】选择考研还是工</a></h3>
<p>站在人生的十字路口,选择考研还是工作,一直困扰着大学...<a href="/2013/1030/24111.html" target="_blank">更多>></a></p>
</div> <ul style="float:left; width:390px; padding-right:5px; line-height:24px;">
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">03-27</span>·<a href="/2014/0327/25371.html" target="_blank" style="font-size:14px; color:#000000; ">【求职加油站】女生面试怎么穿?</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">03-13</span>·<a href="/2014/0313/25308.html" target="_blank" style="font-size:14px; color:#000000; ">我国硕士研究生的4种分类方法</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25223.html" target="_blank" style="font-size:14px; color:#000000; ">考研择校择专业:丛不同角度对比分析</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25222.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:算清楚考研这笔账</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25221.html" target="_blank" style="font-size:14px; color:#000000; ">考研必备相关二十件事</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25220.html" target="_blank" style="font-size:14px; color:#000000; ">充分利用真题复习</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25219.html" target="_blank" style="font-size:14px; color:#000000; ">考研复习资料搜集</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25218.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研复习:"高学历"是否等于"高报酬"?</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25217.html" target="_blank" style="font-size:14px; color:#000000; "> 2015考研寒假复习建议</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25069.html" target="_blank" style="font-size:14px; color:#000000; ">如何顺利通过考研英语词汇难关</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25068.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:考研英语复习中常犯的错误</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25067.html" target="_blank" style="font-size:14px; color:#000000; ">如何在考研复习过程中提高考研英语水平?</a></li>
</ul>
</div>
<div class="conlist" style="display:none" id="bb">
<ul style="float:left; width:390px; padding-right:5px; line-height:24px;">
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">03-27</span>·<a href="/2014/0327/25371.html" target="_blank" style="font-size:14px; color:#000000; ">【求职加油站】女生面试怎么穿?</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">03-13</span>·<a href="/2014/0313/25308.html" target="_blank" style="font-size:14px; color:#000000; ">我国硕士研究生的4种分类方法</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25223.html" target="_blank" style="font-size:14px; color:#000000; ">考研择校择专业:丛不同角度对比分析</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25222.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:算清楚考研这笔账</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25221.html" target="_blank" style="font-size:14px; color:#000000; ">考研必备相关二十件事</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25220.html" target="_blank" style="font-size:14px; color:#000000; ">充分利用真题复习</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25219.html" target="_blank" style="font-size:14px; color:#000000; ">考研复习资料搜集</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25218.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研复习:"高学历"是否等于"高报酬"?</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25217.html" target="_blank" style="font-size:14px; color:#000000; "> 2015考研寒假复习建议</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25069.html" target="_blank" style="font-size:14px; color:#000000; ">如何顺利通过考研英语词汇难关</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25068.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:考研英语复习中常犯的错误</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25067.html" target="_blank" style="font-size:14px; color:#000000; ">如何在考研复习过程中提高考研英语水平?</a></li>
</ul>
</div>
<div class="conlist" style="display:none" id="cc">
<ul style="float:left; width:390px; padding-right:5px; line-height:24px;"> <li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25221.html" target="_blank" style="font-size:14px; color:#000000; ">考研必备相关二十件事</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25220.html" target="_blank" style="font-size:14px; color:#000000; ">充分利用真题复习</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25219.html" target="_blank" style="font-size:14px; color:#000000; ">考研复习资料搜集</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25218.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研复习:"高学历"是否等于"高报酬"?</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25217.html" target="_blank" style="font-size:14px; color:#000000; "> 2015考研寒假复习建议</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25069.html" target="_blank" style="font-size:14px; color:#000000; ">如何顺利通过考研英语词汇难关</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25068.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:考研英语复习中常犯的错误</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25067.html" target="_blank" style="font-size:14px; color:#000000; ">如何在考研复习过程中提高考研英语水平?</a></li>
</ul>
</div>
<div class="conlist" style="display:none" id="dd">
<ul style="float:left; width:390px; padding-right:5px; line-height:24px;"> <li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25223.html" target="_blank" style="font-size:14px; color:#000000; ">考研择校择专业:丛不同角度对比分析</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25222.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:算清楚考研这笔账</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25221.html" target="_blank" style="font-size:14px; color:#000000; ">考研必备相关二十件事</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25220.html" target="_blank" style="font-size:14px; color:#000000; ">充分利用真题复习</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25219.html" target="_blank" style="font-size:14px; color:#000000; ">考研复习资料搜集</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25218.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研复习:"高学历"是否等于"高报酬"?</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">02-27</span>·<a href="/2014/0227/25217.html" target="_blank" style="font-size:14px; color:#000000; "> 2015考研寒假复习建议</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25069.html" target="_blank" style="font-size:14px; color:#000000; ">如何顺利通过考研英语词汇难关</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25068.html" target="_blank" style="font-size:14px; color:#000000; ">2015考研:考研英语复习中常犯的错误</a></li>
<li style="float:left; text-align:left; width:390px; color:#C1C1C1;"><span class="rt" style="font-size:14px;">01-23</span>·<a href="/2014/0123/25067.html" target="_blank" style="font-size:14px; color:#000000; ">如何在考研复习过程中提高考研英语水平?</a></li>
</ul>
</div>
</div>
</div>
jquery 自定义tab的更多相关文章
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- Jquery自定义扩展方法(二)--HTML日历控件
一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...
随机推荐
- php表单提交方法汇总
问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中.解决办法有 ...
- Service的两种启动方法
刚才看到一个ppt,介绍service的两种启动方法以及两者之间的区别. startService 和 bindService startService被形容为我行我素,而bindService被形容 ...
- valuestack(值栈) 和 actioncontext(上下文)
Strut2的Action类通过属性可以获得所有相关的值,如请求参数属性值等.要获得这些参数值,我们要做的唯一一件事就是在Action类中声明与参数同名的属性.在Struts2调用Action类的Ac ...
- 一些技术blog和安全blog
1.安全blog: http://zenxds.com/blog/ http://navisec.it/ http://huaidan.org/ http://leapar.lofter.com/ h ...
- 遇到奇怪的C#/C/C++或者Java的bug可以去问问Coverity
Coverity7月16号在博客Ask The Bug Guys中说以后遇到奇怪的C#/C/C++或者Java的bug可以给TheBugGuys@coverity.com发邮件.然后这些问题就会到一些 ...
- android_小总结_方法过时的兼容处理
随着android系统的升级,有些过时的方法已经不再使用,但是又要兼容老的版本,所以这个时候可以使用反射来处理下 举个列子pull_to_refresh 中有个方法找不到==initializeScr ...
- 触发器记录表某一个字段数据变化的日志 包括插入insert 修改update 删除delete 操作
本文参考:http://www.cnblogs.com/lyhabc/articles/3236985.html ,), ), ), ), ...
- 全栈project师?给把瑞士军刀你去砍鬼子好不好!?
来自www.techgogogo.com 编者注:本文来自Medium前三名推荐文章,发文时已经获得高达2,125个推荐,中文版由天地会珠海分舵编译.全文对当今风靡业界的"全栈xx师&quo ...
- C# 内存管理优化畅想(三)---- 其他方法&结语
前两篇文章提出的优化方法,都是不需要修改源代码的,而是在CLR或JIT层面进行自动优化的.但本文中提出的优化方法则需要引入新的语法,开发者只有在源代码中使用了这些新语法,才会获得优化. 1. 允许对象 ...
- Java 406
项目改名之后, 项目上传后,报错,406,可是项目本地是可以跑起来的, 联系管理员,管理员改了个/etc/httpd/conf/workers2.properties 里面,将本次的项目加入进去就OK ...