JQ的滑动门

028wz

浏览: 9122 次
性别:
来自: 成都

最近访客更多访客>>

pengshiqin1993

dagf113225

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

代码收藏

作为代码收藏

<!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滑动门插件 - 028工作室</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
a{text-decoration: none;color: #000;font-size: 14px;}

#tabbox{ width:100%; overflow:hidden; margin:0 auto;}
.tab_conbox{border: 1px solid #999;border-top: none;}
.tab_con{ display:none;}

.tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
.tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.tabs li a:hover {background: #ccc;} 
.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}

.tab_con {padding:12px;font-size: 14px; line-height:175%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
  $(tab_conbox).find("li").hide();
  $(tabtit).find("li:first").addClass("thistab").show(); 
  $(tab_conbox).find("li:first").show();
 
  $(tabtit).find("li").bind(shijian,function(){
    $(this).addClass("thistab").siblings("li").removeClass("thistab"); 
   var activeindex = $(tabtit).find("li").index(this);
   $(tab_conbox).children().eq(activeindex).show().siblings().hide();
   return false;
  });
 
 };
 /*调用方法如下：*/
 $.jqtab("#tabs","#tab_conbox","click");
 
 $.jqtab("#tabs2","#tab_conbox2","mouseenter");
 
});
</script>
</head>
<body>
<div id="tabbox">
 <h1>简洁jQuery滑动门插件 单击切换演示</h1>
    <ul class="tabs" id="tabs">
<li><a href="http://www.028wz.net/" target="_blank" title="成都网站建设">成都网站建设</a></li>
<li><a href="http://www.028tg.net/" title="成都网站推广" target="_blank">成都网站推广</a></li>
<li><a href="http://www.028studio.com/" title="成都网络公司" target="_blank">成都网络公司</a></li>
<li><a href="http://www.scphotoedu.com/" target=_blank title="成都摄影培训">成都摄影培训</a> </li>
<li><a href="http://www.cd5656.com/" target=_blank title="成都物流公司">成都物流公司</a> </li>
<li><a href="http://www.mfwine.net" target="_blank" title="法国红酒">法国红酒</a> </li>
<li><a href="http://www.mfwine.cn/" target="_blank" title="法国红酒商城">法国红酒商城</a> </li>
<li><a href="http://www.cdjwl.com/" target="_blank" title="成都纹身">成都纹身</a> </li>
<li><a href="http://www.cdsmarthome.com/" target="_blank" title="成都智能家居">成都智能家居</a> </li>
<li><a href="http://yx.jason-english.cn/" target="_blank" title="菲律宾游学">菲律宾游学</a></li>
<li><a href="http://www.glmmy.com/" target=_blank title="成都自动门">成都自动门</a></li>
    </ul>
    <ul class="tab_conbox" id="tab_conbox">
<li class="tab_con"><a href="http://www.028wz.net/" target="_blank" title="成都网站建设">成都网站建设</a></li>
<li class="tab_con"><a href="http://www.028tg.net/" title="成都网站推广" target="_blank">成都网站推广</a></li>
<li class="tab_con"><a href="http://www.028studio.com/" title="成都网络公司" target="_blank">成都网络公司</a></li>
<li class="tab_con"><a href="http://www.scphotoedu.com/" target=_blank title="成都摄影培训">成都摄影培训</a> </li>
<li class="tab_con"><a href="http://www.cd5656.com/" target=_blank title="成都物流公司">成都物流公司</a> </li>
<li class="tab_con"><a href="http://www.mfwine.net" target="_blank" title="法国红酒">法国红酒</a> </li>
<li class="tab_con"><a href="http://www.mfwine.cn/" target="_blank" title="法国红酒商城">法国红酒商城</a> </li>
<li class="tab_con"><a href="http://www.cdjwl.com/" target="_blank" title="成都纹身">成都纹身</a> </li>
<li class="tab_con"><a href="http://www.cdsmarthome.com/" target="_blank" title="成都智能家居">成都智能家居</a> </li>
<li class="tab_con"><a href="http://yx.jason-english.cn/" target="_blank" title="菲律宾游学">菲律宾游学</a></li>
<li class="tab_con"><a href="http://www.glmmy.com/" target=_blank title="成都自动门">成都自动门</a></li>
            
    </ul>
    
    <h1>简洁jQuery滑动门插件 鼠标滑过切换演示</h1>
    <ul class="tabs" id="tabs2">
<li><a href="http://www.028wz.net/" target="_blank" title="成都网站建设">成都网站建设</a></li>
<li><a href="http://www.028tg.net/" title="成都网站推广" target="_blank">成都网站推广</a></li>
<li><a href="http://www.028studio.com/" title="成都网络公司" target="_blank">成都网络公司</a></li>
<li><a href="http://www.scphotoedu.com/" target=_blank title="成都摄影培训">成都摄影培训</a> </li>
<li><a href="http://www.cd5656.com/" target=_blank title="成都物流公司">成都物流公司</a> </li>
<li><a href="http://www.mfwine.net" target="_blank" title="法国红酒">法国红酒</a> </li>
<li><a href="http://www.mfwine.cn/" target="_blank" title="法国红酒商城">法国红酒商城</a> </li>
<li><a href="http://www.cdjwl.com/" target="_blank" title="成都纹身">成都纹身</a> </li>
<li><a href="http://www.cdsmarthome.com/" target="_blank" title="成都智能家居">成都智能家居</a> </li>
<li><a href="http://yx.jason-english.cn/" target="_blank" title="菲律宾游学">菲律宾游学</a></li>
<li><a href="http://www.glmmy.com/" target=_blank title="成都自动门">成都自动门</a></li>
    </ul>
    <ul class="tab_conbox" id="tab_conbox2">
<li class="tab_con"><a href="http://www.028wz.net/" target="_blank" title="成都网站建设">成都网站建设</a></li>
<li class="tab_con"><a href="http://www.028tg.net/" title="成都网站推广" target="_blank">成都网站推广</a></li>
<li class="tab_con"><a href="http://www.028studio.com/" title="成都网络公司" target="_blank">成都网络公司</a></li>
<li class="tab_con"><a href="http://www.scphotoedu.com/" target=_blank title="成都摄影培训">成都摄影培训</a> </li>
<li class="tab_con"><a href="http://www.cd5656.com/" target=_blank title="成都物流公司">成都物流公司</a> </li>
<li class="tab_con"><a href="http://www.mfwine.net" target="_blank" title="法国红酒">法国红酒</a> </li>
<li class="tab_con"><a href="http://www.mfwine.cn/" target="_blank" title="法国红酒商城">法国红酒商城</a> </li>
<li class="tab_con"><a href="http://www.cdjwl.com/" target="_blank" title="成都纹身">成都纹身</a> </li>
<li class="tab_con"><a href="http://www.cdsmarthome.com/" target="_blank" title="成都智能家居">成都智能家居</a> </li>
<li class="tab_con"><a href="http://yx.jason-english.cn/" target="_blank" title="菲律宾游学">菲律宾游学</a></li>
<li class="tab_con"><a href="http://www.glmmy.com/" target=_blank title="成都自动门">成都自动门</a></li>
    </ul>

    
</div>
</body>
</html>

分享到：

使用JS判断域名加载不同的CSS | jquery ajax跨域访问的问题

2012-12-24 11:36
浏览 934
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQ的滑动门

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQ的滑动门

评论

发表评论

相关推荐

跳转JS

PNG图片 兼容IE FF 等浏览器的代码写法

使用JS判断域名加载不同的CSS

表单中用JS使SELECT/OPTION求和

最近访客更多访客>>

PNG图片兼容IE FF 等浏览器的代码写法