jQuery.rTabs实现多种tab选项卡效果代码-html代码-BFW代码库

jQuery.rTabs实现多种tab选项卡效果代码

代码语言：html

所属分类：选项卡

代码描述：jQuery.rTabs实现多种tab选项卡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title></title>

	<head>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jQuery.rTabs.js"></script>

		<script type="text/javascript">

			$(function() {



				$("#tab").rTabs();



				$("#tab2").rTabs({

					bind : 'click',

					animation : 'left'

				});



				$("#tab3").rTabs({

					bind : 'hover',

					animation : 'up'

				});



				$("#tab4").rTabs({

					bind : 'hover',

					animation : 'fadein'

				});



			})

		</script>

		<style>

			body{ background:#fff;}

			h2 {

				width: 400px;

				margin: 0 auto 10px auto;

				font-size: 18px;

				font-family: "微软雅黑";

				color: #333;

			}

			.tab {

				position: relative;

				width: 400px;

				height: 230px;

				overflow: hidden;

				margin: 0 auto 20px auto;

				font-family: Arial;

			}

			.tab-nav {

				height: 30px;

				overflow: hidden;

				background: #f5f5f5;

			}

			.tab-nav a {

				display: block;

				float: left;

				width: 80px;

				height: 30px;

				line-height: 30px;

				text-align: center;

				text-decoration: none;

				color: #999;

			}

			.tab-nav a.current {

				background: #80b600;

				color: #fff;

			}

			.tab-con {

				position: relative;

				width: 400px;

				height: 200px;

				overflow: hidden;

				background: #80b600;

			}

			.tab-con-item {

				display: none;

				width: 400px;

				height: 180px;

				line-height: 180px;

				text-align: center;

				color: #fff;

			}

		</style>

	</head>

	<body>

		<h2>默认样式：自动运行、无动画效果、Hover事件</h2>

		<div class="tab" id="tab">

			<div class="tab-nav j-tab-nav">

				<a href="javascript:void(0);" class="current">Tab1</a>

				<a href="javascript:void(0);">Tab2</a>

				<a href="javascript:void(0);">Tab3</a>

				<a href="javascript:void(0);">Tab4</a>

				<a href="javascript:void(0);">Tab5</a>

			</div>

			<div class="tab-con">

				<div class="j-tab-con">

					<div class="tab-con-item" style="display:block;">

						111111

					</div>

					<div class="tab-con-item">

						222222

					</div>

					<div class="tab-con-item">

						333333

					</div>

					<div class="tab-con-item">

						444444

					</div>

					<div class="tab-con-item">

						555555

					</div>

				</div>

			</div>

		</div>

		<h2>自动运行、向左滚动、点击事件</h2>

		<div class="tab" id="tab2">

			<div class="tab-nav j-tab-nav">

				<a href="javas.........完整代码请登录后点击上方下载按钮下载查看