jQuery自定义tab选项卡切换插件



62 245 82



特效描述:jQuery自定义 tab选项卡 切换插件,jQuery自定义tab选项卡切换插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel='stylesheet' href='css/jquery.cardtabs.css'>
<link rel='stylesheet' href='css/demo.css'>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel='stylesheet' href='css/jquery.cardtabs.css'>
<link rel='stylesheet' href='css/demo.css'>

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.cardtabs.js'></script>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.cardtabs.js'></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery自定义tab选项卡切换插件</title>
</head>
<body class='markdown-body'>
<div class="container" style="width:960px;background:#fff;margin:20px auto;padding:20px;">
	<h2>基本使用示例</h2>
	<div class='example'>
			<div class='tabsholder1'>
				<div data-tab="Meow">
					Eat a plant, kill a hand sit and stare so stare out the window for lick arm hair. Then cats take over the world. Purr with tail in the air. Chirp at birds. Russian blue toy mouse squeak roll over so eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap and find something else more interesting, so immediately regret falling into bathtub, purr for no reason, roll over and sun my belly.<br /><br /> Mesmerizing birds hiss and stare at nothing then run suddenly away hide when guests come over if it fits, i sits for loves cheeseburgers but rub whiskers on bare skin act innocent and tuxedo cats always looking dapper. I am the best sit in window and stare oooh, a bird, yum and chase ball of string and my left donut is missing, as is my right climb leg. Hate dog swat turds around the house claw drapes burrow under covers, but lie on your belly and purr when you are asleep. Climb leg going to catch the red dot today going to catch the red dot today scratch the furniture and brown cats with pink ears. Cough hairball on conveniently placed pants pelt around the house and up and down stairs chasing phantoms, or play riveting piece on synthesizer keyboard. Meow meow. Destroy couch. Meowwww. 
				</div>
				<div data-tab="Hipster tab">
					Poke single-origin coffee chartreuse venmo seitan letterpress, sriracha hammock hot chicken cold-pressed church-key. Next level listicle taiyaki, heirloom mixtape literally bushwick keffiyeh narwhal etsy post-ironic jianbing ennui unicorn. Ugh schlitz hell of celiac put a bird on it. Post-ironic butcher everyday carry, iPhone af shaman cronut asymmetrical leggings hoodie vice air plant +1 keytar 3 wolf moon. 90's post-ironic cold-pressed succulents master cleanse. Jianbing neutra franzen, gochujang mumblecore heirloom coloring book literally pok pok 3 wolf moon brunch offal. Raw denim taxidermy lumbersexual, paleo venmo thundercats retro pitchfork chicharrones raclette forage banjo authentic ennui.
					<br /><br />
					Vaporware farm-to-table glossier brooklyn jean shorts retro green juice slow-carb. Enamel pin snackwave hexagon knausgaard. Gluten-free cloud bread raclette bespoke, roof party art party meh adaptogen pok pok try-hard. Mumblecore aesthetic occupy, schlitz knausgaard live-edge ugh authentic fashion axe vape mixtape pork belly tacos. Bushwick YOLO hashtag, live-edge jean shorts crucifix hexagon jianbing street art food truck semiotics. Deep v food truck fap roof party ennui. Mixtape vaporware shaman pickled snackwave YOLO.
				</div>
			</div>
	</div>
	<h2>主题示例</h2>
	<h3>Inset 主题</h3>
	<div class='example'>
			<div class='tabsholder2'>
				<div data-tab="Meow">
					Eat a plant, kill a hand sit and stare so stare out the window for lick arm hair. Then cats take over the world. Purr with tail in the air. Chirp at birds. Russian blue toy mouse squeak roll over so eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap and find something else more interesting, so immediately regret falling into bathtub, purr for no reason, roll over and sun my belly.<br /><br /> Mesmerizing birds hiss and stare at nothing then run suddenly away hide when guests come over if it fits, i sits for loves cheeseburgers but rub whiskers on bare skin act innocent and tuxedo cats always looking dapper. I am the best sit in window and stare oooh, a bird, yum and chase ball of string and my left donut is missing, as is my right climb leg. Hate dog swat turds around the house claw drapes burrow under covers, but lie on your belly and purr when you are asleep. Climb leg going to catch the red dot today going to catch the red dot today scratch the furniture and brown cats with pink ears. Cough hairball on conveniently placed pants pelt around the house and up and down stairs chasing phantoms, or play riveting piece on synthesizer keyboard. Meow meow. Destroy couch. Meowwww. 
				</div>
				<div data-tab="Hipster tab">
					Poke single-origin coffee chartreuse venmo seitan letterpress, sriracha hammock hot chicken cold-pressed church-key. Next level listicle taiyaki, heirloom mixtape literally bushwick keffiyeh narwhal etsy post-ironic jianbing ennui unicorn. Ugh schlitz hell of celiac put a bird on it. Post-ironic butcher everyday carry, iPhone af shaman cronut asymmetrical leggings hoodie vice air plant +1 keytar 3 wolf moon. 90's post-ironic cold-pressed succulents master cleanse. Jianbing neutra franzen, gochujang mumblecore heirloom coloring book literally pok pok 3 wolf moon brunch offal. Raw denim taxidermy lumbersexual, paleo venmo thundercats retro pitchfork chicharrones raclette forage banjo authentic ennui.
					<br /><br />
					Vaporware farm-to-table glossier brooklyn jean shorts retro green juice slow-carb. Enamel pin snackwave hexagon knausgaard. Gluten-free cloud bread raclette bespoke, roof party art party meh adaptogen pok pok try-hard. Mumblecore aesthetic occupy, schlitz knausgaard live-edge ugh authentic fashion axe vape mixtape pork belly tacos. Bushwick YOLO hashtag, live-edge jean shorts crucifix hexagon jianbing street art food truck semiotics. Deep v food truck fap roof party ennui. Mixtape vaporware shaman pickled snackwave YOLO.
				</div>
			</div>
		</div>
		<h3>Graygreen 主题</h3>
		<div class='example'>
			<div class='tabsholder3'>
				<div data-tab="Meow">
					Eat a plant, kill a hand sit and stare so stare out the window for lick arm hair. Then cats take over the world. Purr with tail in the air. Chirp at birds. Russian blue toy mouse squeak roll over so eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap and find something else more interesting, so immediately regret falling into bathtub, purr for no reason, roll over and sun my belly.<br /><br /> Mesmerizing birds hiss and stare at nothing then run suddenly away hide when guests come over if it fits, i sits for loves cheeseburgers but rub whiskers on bare skin act innocent and tuxedo cats always looking dapper. I am the best sit in window and stare oooh, a bird, yum and chase ball of string and my left donut is missing, as is my right climb leg. Hate dog swat turds around the house claw drapes burrow under covers, but lie on your belly and purr when you are asleep. Climb leg going to catch the red dot today going to catch the red dot today scratch the furniture and brown cats with pink ears. Cough hairball on conveniently placed pants pelt around the house and up and down stairs chasing phantoms, or play riveting piece on synthesizer keyboard. Meow meow. Destroy couch. Meowwww. 
				</div>
				<div data-tab="Hipster tab">
					Poke single-origin coffee chartreuse venmo seitan letterpress, sriracha hammock hot chicken cold-pressed church-key. Next level listicle taiyaki, heirloom mixtape literally bushwick keffiyeh narwhal etsy post-ironic jianbing ennui unicorn. Ugh schlitz hell of celiac put a bird on it. Post-ironic butcher everyday carry, iPhone af shaman cronut asymmetrical leggings hoodie vice air plant +1 keytar 3 wolf moon. 90's post-ironic cold-pressed succulents master cleanse. Jianbing neutra franzen, gochujang mumblecore heirloom coloring book literally pok pok 3 wolf moon brunch offal. Raw denim taxidermy lumbersexual, paleo venmo thundercats retro pitchfork chicharrones raclette forage banjo authentic ennui.
					<br /><br />
					Vaporware farm-to-table glossier brooklyn jean shorts retro green juice slow-carb. Enamel pin snackwave hexagon knausgaard. Gluten-free cloud bread raclette bespoke, roof party art party meh adaptogen pok pok try-hard. Mumblecore aesthetic occupy, schlitz knausgaard live-edge ugh authentic fashion axe vape mixtape pork belly tacos. Bushwick YOLO hashtag, live-edge jean shorts crucifix hexagon jianbing street art food truck semiotics. Deep v food truck fap roof party ennui. Mixtape vaporware shaman pickled snackwave YOLO.
				</div>
			</div>
		</div>
		<h3>Wiki 主题</h3>
		<div class='example'>
			<div class='tabsholder4'>
				<div data-tab="Article">
					Eat a plant, kill a hand sit and stare so stare out the window for lick arm hair. Then cats take over the world. Purr with tail in the air. Chirp at birds. Russian blue toy mouse squeak roll over so eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap and find something else more interesting, so immediately regret falling into bathtub, purr for no reason, roll over and sun my belly.<br /><br /> Mesmerizing birds hiss and stare at nothing then run suddenly away hide when guests come over if it fits, i sits for loves cheeseburgers but rub whiskers on bare skin act innocent and tuxedo cats always looking dapper. I am the best sit in window and stare oooh, a bird, yum and chase ball of string and my left donut is missing, as is my right climb leg. Hate dog swat turds around the house claw drapes burrow under covers, but lie on your belly and purr when you are asleep. Climb leg going to catch the red dot today going to catch the red dot today scratch the furniture and brown cats with pink ears. Cough hairball on conveniently placed pants pelt around the house and up and down stairs chasing phantoms, or play riveting piece on synthesizer keyboard. Meow meow. Destroy couch. Meowwww. 
				</div>
				<div data-tab="Edit">
					Poke single-origin coffee chartreuse venmo seitan letterpress, sriracha hammock hot chicken cold-pressed church-key. Next level listicle taiyaki, heirloom mixtape literally bushwick keffiyeh narwhal etsy post-ironic jianbing ennui unicorn. Ugh schlitz hell of celiac put a bird on it. Post-ironic butcher everyday carry, iPhone af shaman cronut asymmetrical leggings hoodie vice air plant +1 keytar 3 wolf moon. 90's post-ironic cold-pressed succulents master cleanse. Jianbing neutra franzen, gochujang mumblecore heirloom coloring book literally pok pok 3 wolf moon brunch offal. Raw denim taxidermy lumbersexual, paleo venmo thundercats retro pitchfork chicharrones raclette forage banjo authentic ennui.
					<br /><br />
					Vaporware farm-to-table glossier brooklyn jean shorts retro green juice slow-carb. Enamel pin snackwave hexagon knausgaard. Gluten-free cloud bread raclette bespoke, roof party art party meh adaptogen pok pok try-hard. Mumblecore aesthetic occupy, schlitz knausgaard live-edge ugh authentic fashion axe vape mixtape pork belly tacos. Bushwick YOLO hashtag, live-edge jean shorts crucifix hexagon jianbing street art food truck semiotics. Deep v food truck fap roof party ennui. Mixtape vaporware shaman pickled snackwave YOLO.
				</div>
			</div>
		</div>
</div>
<script type='text/javascript'>
		$('.tabsholder1').cardTabs();
		$('.tabsholder2').cardTabs({theme: 'inset'});
		$('.tabsholder3').cardTabs({theme: 'graygreen'});
		$('.tabsholder4').cardTabs({theme: 'wiki'});
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到