繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery学习笔记 实现图片翻转效果和TAB标签切换效果
- Javascript
- 玩透弹出窗口
- 几个常用的日期函数
- 简单的脚本帮你编排JScript程序中的缩进
- 得到 words.js?hello,world! 参数的处理方法
- 如何在javascript中传值
- 可输入的select
- IE支持的HTML元素的DISABLE属性在NETSCAPE4.76中的实现
- 利用xml数据岛实现多级关联下拉选择框的做法
- 利用Wipe等ActiveX技术，实现n(n>>2)幅图片轮换擦洗显示
- Javascript技术实现真正的网上试听
- JavaScript实现在线编辑表格
- 根据客户端的分辨率不同而重定向到不同网页的脚本
- 几种不刷新页面取数据的方法
- web进度条
- 随手写的一个动态添加删除行的HTC行为组件
- 农历与阳历的对照
- 关于在页面中解决打印的几个问题
- "打开,另存为,属性,打印"等14个JS代码
- 无提示框关闭IE窗口
- 实现上传（增删）多个文件的客户端写法。
Javascript 中的 JQuery学习笔记 实现图片翻转效果和TAB标签切换效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 131 ::
收藏到网摘: n/a
为了保证前台页面的整洁，我们习惯性地将CSS放入一个单独的.CSS文件中以便调用，而JS也同样可以放到单独的JS文件中去，并且页面上的事件如onclick，onmouseover也可以分离出来，现在网上比较流行JQuery 所以自己也下了一个来学习，把之前写的几个JS代码都转换成JQuery，既能保证代码的清晰，也保证了代码的通用性，真是一举两得啊，由于是初学者，所以代码有许多的不足，还请大家多多指正：）
1、实现图片翻转效果，DW本身提供了这个功能，不过还是自己写的好用，呵呵。之前写的方式比较麻烦，代码也比较乱，用JQuery改造后可以使其更加清晰，核心代码如下：
JS代码
复制代码 代码如下:
2、JQuery实现Tab标签写换效果，这个比较常用到，之前用JS写的代码依旧很乱，而且代码没有分离开，改造后部分代码如下：
JS代码：
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#MenuTabs div").mouseover(function(){
$(this).css("cursor","pointer");
var checkmenu = $(this).attr("id");
var checkcontent = checkmenu.replace("MenuTab","Content");
$("#MenuTabs div").each(function(){
if($(this).attr("id") == checkmenu){
$(this).attr("class","Tab_On");
}else{
$(this).attr("class","Tab_Off");
}
});
$("#Contents div").each(function(){
if($(this).attr("id") == checkcontent){
$(this).css("display","block");
}else{
$(this).css("display","none");
}
});
});
});
//-->
</script>
HTML代码：
<div style="padding-top:10px;">
<div id="MenuTabs" style="float:left;" align="left">
<div id="MenuTab1" class="Tab_Off"> 标题一</div>
<div id="MenuTab2" class="Tab_Off"> 标题二</div>
<div id="MenuTab3" class="Tab_On"> 标题三</div>
<div id="MenuTab4" class="Tab_Off"> 标题四</div>
</div>
<div id="Contents" style="float:left;">
<div id="Content1" style="display:none;">内容一</div>
<div id="Content2" style="display:none;">内容二</div>
<div id="Content3" style="display:block;">内容三</div>
<div id="Content4" style="display:none;">内容四</div>
</div>
</div>
CSS代码：
#Contents{
width:318px;
height:125px;
border-top:1px #d1d1d1 solid;
border-right:1px #d1d1d1 solid;
border-bottom:1px #d1d1d1 solid;
color:#d1d1d1;
}
.Tab_Off{
width:132px;
height:30px;
background-color:#ebebeb;
vertical-align:middle;
line-height:30px;
color:#373737;
border-bottom:1px #f6f6f6 solid;
border-top:1px #f6f6f6 solid;
border-left:1px #ededed solid;
border-right:1px #d1d1d1 solid;
}
.Tab_On{
width:132px;
height:30px;
background-color:#FFFFFF;
vertical-align:middle;
line-height:30px;
color:#696969;
border-top:1px #dbdbdb solid;
border-bottom:1px #dbdbdb solid;
border-left:1px #dbdbdb solid;
border-right:1px #FFFFFF solid;
}
最后附一张效果：
以上就是今天的学习总结，这里因为测试的原因，我没有单独放到JS文件中，不过大家可以将以上代码放到同一个JS文件中去，这样可以方便调用，再有就是记得一定要引入JQuery框架文件啊...
2、JQuery实现Tab标签写换效果，这个比较常用到，之前用JS写的代码依旧很乱，而且代码没有分离开，改造后部分代码如下：
JS代码：
复制代码 代码如下:
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#MenuTabs div").mouseover(function(){
$(this).css("cursor","pointer");
var checkmenu = $(this).attr("id");
var checkcontent = checkmenu.replace("MenuTab","Content");
$("#MenuTabs div").each(function(){
if($(this).attr("id") == checkmenu){
$(this).attr("class","Tab_On");
}else{
$(this).attr("class","Tab_Off");
}
});
$("#Contents div").each(function(){
if($(this).attr("id") == checkcontent){
$(this).css("display","block");
}else{
$(this).css("display","none");
}
});
});
});
//-->
</script>
HTML代码：
复制代码 代码如下:
<div style="padding-top:10px;">
<div id="MenuTabs" style="float:left;" align="left">
<div id="MenuTab1" class="Tab_Off"> 标题一</div>
<div id="MenuTab2" class="Tab_Off"> 标题二</div>
<div id="MenuTab3" class="Tab_On"> 标题三</div>
<div id="MenuTab4" class="Tab_Off"> 标题四</div>
</div>
<div id="Contents" style="float:left;">
<div id="Content1" style="display:none;">内容一</div>
<div id="Content2" style="display:none;">内容二</div>
<div id="Content3" style="display:block;">内容三</div>
<div id="Content4" style="display:none;">内容四</div>
</div>
</div>
CSS代码：
复制代码 代码如下:
#Contents{
width:318px;
height:125px;
border-top:1px #d1d1d1 solid;
border-right:1px #d1d1d1 solid;
border-bottom:1px #d1d1d1 solid;
color:#d1d1d1;
}
.Tab_Off{
width:132px;
height:30px;
background-color:#ebebeb;
vertical-align:middle;
line-height:30px;
color:#373737;
border-bottom:1px #f6f6f6 solid;
border-top:1px #f6f6f6 solid;
border-left:1px #ededed solid;
border-right:1px #d1d1d1 solid;
}
.Tab_On{
width:132px;
height:30px;
background-color:#FFFFFF;
vertical-align:middle;
line-height:30px;
color:#696969;
border-top:1px #dbdbdb solid;
border-bottom:1px #dbdbdb solid;
border-left:1px #dbdbdb solid;
border-right:1px #FFFFFF solid;
}
最后附一张效果：
以上就是今天的学习总结，这里因为测试的原因，我没有单独放到JS文件中，不过大家可以将以上代码放到同一个JS文件中去，这样可以方便调用，再有就是记得一定要引入JQuery框架文件啊...
评论 (0) All
