jQuery - en lettere måte å gjøre dette på?

[Jazz]

Hei alle sammen...

Jeg har aldri klart å forstå/pugge javascript, så jeg begynte å bruke jquery. Men forsatt er jeg ikke god nok. Jeg har laget en type tabs for en nettside jeg jobber med, så har jeg laget en lang script med jquery. Problemet er at hver gang jeg skal legge til nye tabs, må jeg endre nesten hele scripta....er det mulig å gjøre dette med en funksjon eller noe sånt?

Siden er ikke live ennå, så jeg kan ikke vise demo, men her er koden:

header:

<script type="text/javascript">
$(document).ready(function() {
		
		$('#t2, #t3, #t4').hide();
		$('#a1').addClass('active');
		
		$("#a1").hover(function() {
			$('#t2, #t3, #t4').hide();
			$('#t1').show();
			
			$('#a2, #a3, #a4').removeClass('active');
			$('#a1').addClass('active');
		});
		
		$("#a2").hover(function() {
			$('#t1, #t3, #t4').hide();
			$('#t2').show();
			
			$('#a1, #a3, #a4').removeClass('active');
			$('#a2').addClass('active');
		});
		
		$("#a3").hover(function() {
			$('#t1, #t2, #t4').hide();
			$('#t3').show();
			
			$('#a1, #a2, #a4').removeClass('active');
			$('#a3').addClass('active');
		});
		
		$("#a4").hover(function() {
			$('#t1, #t3, #t2').hide();
			$('#t4').show();
			
			$('#a1, #a3, #a2').removeClass('active');
			$('#a4').addClass('active');
		});
});
</script>

og her er body:

<ul>
    	<li><a id="a1" href="#">Nyheter</a></li>
        <li><a id="a2" href="#">Arrangementer</a></li>
        <li><a id="a3" href="#">Deltakere</a></li>
        <li><a id="a4" href="#">Sponsorer</a></li>
</ul>

<div id="t1">
        tekst
</div>

<div id="t2">
        tekst
</div>

<div id="t3">
        tekst
</div>

<div id="t4">
        tekst
</div>

tusen takk for hjelpen!

 

[tyr897]

$(document).ready( function() {
    $("#menu a").hover( function() {
        $("#menu a").removeClass("active");
        $(".tab").hide();

        var tab = $(this).addClass("active").attr("data-tab");
        $("#" + tab).show();
    });

    $("#menu li:first-child a").hover();
});

<ul id="menu">
    <li><a href="#" data-tab="tab-id-1">Tab 1</a></li>
    <li><a href="#" data-tab="tab-id-2">Tab 2</a></li>
</ul>

<div id="tab-id-1" class="tab"><h1>TAB 1</h1></div>
<div id="tab-id-2" class="tab"><h1>TAB 2</h1></div>

Trikset er å gruppere elementer som hører sammen. Har også lagt til en attributt data-tab som spesifiserer hvilken tab id som skal vises for linken, føler det er mer oversiktlig enn tall basert på rekkefølge. For mer avanserte funksjoner kan du ta en titt på jQuery UI tabs.

 

[Jazz]

Tusen takk for svaret, det var akkuratt noe slikt jeg tenkte på, men bare klarte ikke å komme på....