Turvenn.no
Webutvikler kurs ASP.NET, C#, CSS mm.

WebRessurs.no - Webprogrammering og ressurs innen ASP, ASP.NET, PHP, SQL, HTML, CSS, Javascript, XML, C#, VB, Flash  mm.

Brukernavn: 
Passord:

Registrèr deg Glemt passord?
Logg deg inn




  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




Kode Artikler
Linker


Mål internetthastigheten din.


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.



Illustrasjonsbilde


<!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!


WebRessurs.no anbefaler:    StackOverflow.com | Experts-Exchange.com | W3schools | ASP.NET | Codeproject | 4Guys
WebRessurs.no er utviklet og drives av SoftMaker
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 14066673.
Copyright WebRessurs.no © 2003 - 2018
Jobbsøk.no - Jobbsøknad, CV, intervju, tips og lenker