|
ASP.net (199)
ASP 3.0 (111)
PHP (30)
HTML (66)
SQL (89)
CSS (46)
XML (7)
JavaScript (78)
Diverse kode (13)
Programmering (22)
System og drift (15)
Trafikk og inntekt (11)
Guider og tips (22)
Nyttig lesestoff (23)
Web forum (604)
Link galleri (565)
ASP.NET kurs(5)
CSS kurs (2)
JQuery kurs (2)
Øk trafikken (8)
Facebook App. (4)
Microsoft CEO (6)
Server & web
Internett & epost
Systemverktøy
Sikkerhet
Fildeling
Lyd & media
Diverse software
Domenesalg
Metagenerator
Websikre farger
WebMail
Bli medlem!
Siste innlegg
Gjestebok
Tips en venn
Kontakt oss
Forsiden
|
|
Lag en tabs-meny ved hjelp av Jquery
Av: Øyvind A. Isaksen
Her viser vi et komplett eksempel på hvordan du ved hjelp av Jquery kan lage en tabsmeny. Eksempelet består av et stilsett (CSS) som bestemmer utseende på vår tabsmeny, en referanse til JQuery biblioteket som gir oss tilgang til JQuery funksjonaliteten, selve JQuery koden bestemmer hvordan vår tabsmeny skal oppføre seg og til slutt en HTML kode som er selve tabsmenyen vår.
<!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>
<title>Jquery tab tutorial</title>
<!-- Stilsett / CSS: -->
<style type="text/css">
#tabs {
margin: 20px 0;
}
#tabs ul {
float: right;
background: #EEE;
width: 600px;
padding-top: 4px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline; /* ie6 double float margin bug */
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #0073BF;
font-weight: bold;
}
#tabs ul li.active {
background-color: #CCC;
}
#tabs ul li.active a {
color: #333333;
}
#tabs div {
background: #CCC;
clear: both;
padding: 20px;
min-height: 200px;
}
#tabs div h3 {
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 1px;
}
#tabs div p {
line-height: 150%;
}
</style>
<!-- Referanse til JQuery Library: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Referanse til JQuery Library: -->
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide(); // Skjuler alle tabs
$('#tabs div:first').show(); // Viser første tab
$('#tabs ul li:first').addClass('active'); // Setter første tab som aktiv
$('#tabs ul li a').click(function(){ // Når en tab klikkes
$('#tabs ul li').removeClass('active'); // Fjern alle aktiv tab'er
$(this).parent().addClass('active'); // Sett aktiv tab
var currentTab = $(this).attr('href'); // Sett variabelen currentTab til verdien av href attributtet til klikket link
$('#tabs div').hide(); // skjul alle tab'er (innhold)
$(currentTab).show(); // Vis aktiv tab (innhold)
return false;
});
});
</script>
</head>
<body>
<!-- HTML kode: -->
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Tekst her...</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Tekst her...</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Tekst her...</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Tekst her...</p>
</div>
</div>
</body>
</html>
Se flere kurs under "KURS / TUTORIALS" i menyen til venstre!
|
|
