【鲜明简洁】简洁jQuery滑动门效果特效代码

更新时间：2018-03-26 来源：jquery 手机版 字体：大中小

【www.bbyears.com--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=utf-8" />
<title>简洁jQuery滑动门插件 - </title>
<meta name="keywords" content="简洁jQuery滑动门插件 " />
<meta name="description" content="简洁jQuery滑动门插件 " />
<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:728px; 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.7.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>

<h1>简洁jQuery滑动门插件 单击切换演示</h1>
  <ul class="tabs" id="tabs">
    导航菜单
    焦点幻灯片
    广告代码
    <a href="http://www.bbyears.com/clist-18-1.html" target="_blank" class="keylink">网页特效</a>
  
  <ul class="tab_conbox" id="tab_conbox">
    <li class="tab_con">
      <p>1</p>
    
    <li class="tab_con">
      <p>2</p>
    
    <li class="tab_con">
      <p>3</p>
    
    <li class="tab_con">
      <p>4</p>
    
  
 
  <h1>简洁jQuery滑动门插件 鼠标滑过切换演示</h1>
  <ul class="tabs" id="tabs2">
    导航菜单
    焦点幻灯片
    广告代码
    <a href="http://www.bbyears.com/clist-18-1.html" target="_blank" class="keylink">网页特效</a>
  
  <ul class="tab_conbox" id="tab_conbox2">
    <li class="tab_con">
      <p>1</p>
    
    <li class="tab_con">
      <p>2</p>
    
    <li class="tab_con">
      <p>3</p>
    
    <li class="tab_con">
      <p>4</p>

</body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/wangyezhizuo/40219.html

链接：http://www.bbyears.com/wangyezhizuo/40219.html
【鲜明简洁】简洁jQuery滑动门效果特效代码(转载时请注明本文出处及链接)

猜你感兴趣

【phpstudy】php implode()函数使用说明 2018-03-26
[tp-link官网]TP-LINK TL-WR941N无线路由器设置指南Repeater模式 2018-03-26
[tplink无线路由器当无线ap无线交换机怎么设置方法]tplink无线路由器当无线AP（无线交换机）怎么设置？ 2018-03-26
[jquery使用ajax操作json格式数据类型]jQuery使用Ajax操作JSON格式数据说明 2018-03-26
i829美国最新排期|I829如何将通过浏览器下载的文件直接保存在存储卡中 2018-03-26
【tp-link官网】TP-LINK Mini TL-WR700N无线路由器设置Router模式 2018-03-26
[d-link怎么静态ip]D-link DI-524M路由器怎么设置 DI-524M设置图解 2018-03-26
javascript学习指南|JavaScript闭包使用方法详解 2018-03-26
【i829美国最新排期】I829插上充电器,屏幕一直亮如何解决 2018-03-26
tp-link官网_TP-LINK TL-WR700N无线路由器设置图解 2018-03-26

本类排行

本类最新

更多>>

【鲜明简洁】简洁jQuery滑动门效果特效代码

猜你感兴趣

热门标签

本类排行

本类最新