Jquery tabbladen snippet

Auteur: Devimo - 03 februari 2016 - 17:03 - Gekeurd door: Thomas - Hits: 8922 - Aantal punten: (0 stemmen)

Kleine snippet om te werken met verschillende tabbladen (jQuery based), niet geheel perfect maar het werkt wel:)

Veel plezier ermee

Code:

"JS" code - Bekijk de code zonder highlighting - Klap code in

                $(document).ready(function()
{
	$(".tabs-content").each(function(){
		$("div:not(:first)", this).hide();
	});
	$('#tabs a').click(function()
	{
		$("#tabs>li.active").removeClass("active");
		$(this).parent().addClass("active");
		$(".tabs-content").each(function(){
			$("div:not(.tabs-content)", this).hide();
		});
		$($(this).attr('href')).show();
		
		return false;
	});
});

            
$(document).ready(function()
{
	$(".tabs-content").each(function(){
		$("div:not(:first)", this).hide();
	});
	$('#tabs a').click(function()
	{
		$("#tabs>li.active").removeClass("active");
		$(this).parent().addClass("active");
		$(".tabs-content").each(function(){
			$("div:not(.tabs-content)", this).hide();
		});
		$($(this).attr('href')).show();
 
		return false;
	});
});
 

HTML:

"HTML" code - Bekijk de code zonder highlighting - Klap code in

                <!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Tabs</title>
	<link rel="stylesheet" href="style.css">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script src="tabs.js"></script>
</head>

<body>
	<ul id="tabs">
		<li class="active"><a href="#section1">Scripts</a></li>
		<li><a href="#section2">Downloads</a></li>
	</ul>
	<div class="tabs-content">	
		<div id="section1">
			<h1>Section 1</h1>
			<p>This is content in section 1.</p>
		</div>
		<div id="section2">
			<h1>Section 2</h1>
			<p>This is content in section 2.</p>
		</div>
	</div>
</body>

</html>

            
<!DOCTYPE html>
<html>
 
<head>
	<meta charset="UTF-8">
	<title>Tabs</title>
	<link rel="stylesheet" href="style.css">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script src="tabs.js"></script>
</head>
 
<body>
	<ul id="tabs">
		<li class="active"><a href="#section1">Scripts</a></li>
		<li><a href="#section2">Downloads</a></li>
	</ul>
	<div class="tabs-content">	
		<div id="section1">
			<h1>Section 1</h1>
			<p>This is content in section 1.</p>
		</div>
		<div id="section2">
			<h1>Section 2</h1>
			<p>This is content in section 2.</p>
		</div>
	</div>
</body>
 
</html>
 

CSS gebruikt voor de demo:

"css" code - Bekijk de code zonder highlighting - Klap code in

                /* tab styles */
ul#tabs
{
	list-style: none; border-bottom: 3px solid #ff7100;
	width: 95%;
	padding: 5px 5px 0px 5px;
	overflow: hidden;
}
ul#tabs li.active
{
	float: left;
	display: block;
	padding: 5px;
	background-color: #fc8527;
	margin: 0px 10px 0px 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #ff7100;
	border-bottom: 0px;
}
ul#tabs li:hover
{
	float: left;
	display: block;
	padding: 5px;
	background-color: #ff7100;
	margin: 0px 10px 0px 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #fc8527;
	border-bottom: 0px;
}
ul#tabs li
{
	float: left;
	display: block;
	padding: 6px 6px 0px 6px;
	margin: 0px 10px 0px 0px;
}

            
/* tab styles */
ul#tabs
{
	list-style: none; border-bottom: 3px solid #ff7100;
	width: 95%;
	padding: 5px 5px 0px 5px;
	overflow: hidden;
}
ul#tabs li.active
{
	float: left;
	display: block;
	padding: 5px;
	background-color: #fc8527;
	margin: 0px 10px 0px 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #ff7100;
	border-bottom: 0px;
}
ul#tabs li:hover
{
	float: left;
	display: block;
	padding: 5px;
	background-color: #ff7100;
	margin: 0px 10px 0px 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #fc8527;
	border-bottom: 0px;
}
ul#tabs li
{
	float: left;
	display: block;
	padding: 6px 6px 0px 6px;
	margin: 0px 10px 0px 0px;
}
 

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (2)