[JS] Kodo optimizacija

[ES.^]

<script> 
$("t1-2").hide(); 
$("t1-3").hide(); 
$("t1-4").hide(); 
$("t1-5").hide(); 

$("t2-2").hide(); 
$("t2-3").hide(); 
$("t2-4").hide(); 
$("t2-5").hide(); 
$(document).ready(function() { 
        $('n1').click(function() { 
            $("t1-1").show(); 
            $("t2-1").show(); 
            $("t1-2").hide(); 
            $("t1-3").hide(); 
            $("t1-4").hide(); 
            $("t1-5").hide(); 
             
            $("t2-2").hide(); 
            $("t2-3").hide(); 
            $("t2-4").hide(); 
        }); 
         
        $('n2').click(function() { 
            $("t1-2").show(); 
            $("t2-2").show(); 
             
            $("t1-1").hide(); 
            $("t1-3").hide(); 
            $("t1-4").hide(); 
            $("t1-5").hide(); 
             
            $("t2-1").hide(); 
            $("t2-3").hide(); 
            $("t2-4").hide(); 
        }); 
         
        $('n3').click(function() { 
            $("t1-3").show(); 
            $("t2-3").show(); 
             
            $("t1-1").hide(); 
            $("t1-2").hide(); 
            $("t1-4").hide(); 
            $("t1-5").hide(); 
             
            $("t2-1").hide(); 
            $("t2-2").hide(); 
            $("t2-4").hide(); 
        }); 
         
        $('n4').click(function() { 
            $("t1-4").show(); 
            $("t2-4").show(); 
             
            $("t1-1").hide(); 
            $("t1-2").hide(); 
            $("t1-3").hide(); 
            $("t1-5").hide(); 
             
            $("t2-1").hide(); 
            $("t2-2").hide(); 
            $("t2-3").hide(); 
        }); 
         
        $('n5').click(function() { 
            $("t1-5").show(); 
            $("t2-5").show(); 
             
            $("t1-1").hide(); 
            $("t1-2").hide(); 
            $("t1-3").hide(); 
            $("t1-4").hide(); 
             
            $("t2-1").hide(); 
            $("t2-2").hide(); 
            $("t2-3").hide(); 
            $("t2-4").hide(); 
        }); 
}); 
</script>

Įmanoma kaip nors sumažinti šį kodą? Kodas labai painus ir užima per daug vietos. Bandau padaryti dinaminius tekstus (paslėpęs senus ir parodęs naujus).

Spec. forumo neradau, todėl rašau čia.

Redaguota Liepos 13, 2014, nario ES.^

[Ssaint]

negeriau butu isimest i tavopavadinimas.css ?

[ES.^]

negeriau butu isimest i tavopavadinimas.css ?

?

[RILEYW1]

negeriau butu isimest i tavopavadinimas.css ?

gal į .js?

[leoleva]

Duok net tik JS kodą, o ir dalį html, nes čia nelabai eina ką suprast. Reiktų visus tuos  divus susidėt į vieną bendrą, tada atskirti porom, kad galėtum pritaikyt kitą kodą bet gal veiks (su js mano draugystė nėra labai stipri..)
 

$(document).ready(function() {
	$("#one_div").children("div").hide(); // Vienas div kuris apjuosia visus t*-* div'us
	$("#some_click").click(function() { // clicko funcija
		$("#vip_body1").children("div").hide(); // paslepia kas nereikia
		$("#vip_body1 > div#t"+ $(this).val()).show(); // parodo ką reikia
	});
});

[ES.^]

Padėjo kitam forume.

<ul class="nav">
    <li onClick="view_tab('first_tab')">1</li>
    <li onClick="view_tab('second_tab')">2</li>
    <li onClick="view_tab('third_tab')">3</li>
</ul>

<div id="box">
    <span id="tab" tab="first_tab">1<br>1...</span>
    <span id="tab" tab="second_tab">2<br>2...</span>
    <span id="tab" tab="third_tab">3<br>3...</span>
    <span>Tekstas</span>
</div>

body {
    font-family: "Arial";
    font-size: 14px;
}

.nav {
    padding: 0px;

    list-style: none;
    cursor: pointer;
}
.nav li:hover {
    color: grey;
}
.nav li:checked {
    color: red;
}

#box {
    padding: 5px;
    
    border: 1px solid #ddd;
}
#box #tab {
    display: none;
}
#box #tab:first-child {
    display: block;
}

view_tab = function(tab) {
    var box = document.getElementById("box"),
        childs = box.getElementsByTagName("*");
    for (var i=0; i < childs.length; i++) {
        if (childs[i].getAttribute("tab")){
            childs[i].style.display = "none";
        }
        if (childs[i].getAttribute("tab") == tab) {
            childs[i].style.display = "block";
        }
    }
}

Temą galima rakinti.