ugrás a tartalomhoz

Ezt hogy lehetne szebben megoldani?

Pallosi Péter · 2013. Már. 2. (Szo), 17.01
Sziasztok egy beléptető rendszeren dolgozok.
És fülek segítségével lehet navigálni a menűpontok között."Regisztráció-Belépés-Elfelejtett jelszó"

és ezt ugye jQuery-vel oldottam meg igaz nem valami szép a kód Nem régóta ismerkedem a jQuery dokumentációjával.
Szeretném,ha megnéznétek a kódot és valami mondanátok rá,hogy hogy lehetne esetleg tisztább kód?
jQuery(document).ready(function(){ 

jQuery(.fullek).click(function(){ 
var ahref=jQuery(this).attr("href"); 

jQuery(".fullek").removeClass("active"); 

jQuery(jQuery(this).parent()).addClass("active");
 
jQuery('div[class*="tab-"]').hide(); 

jQuery("."+ahref_class).show(); 


} 

}
‹ CSS formázás / pozicionálás Ajax a javascript ereje példaprogramok ›
 ■
1

Formázással, első körben.

Joó Ádám · 2013. Már. 2. (Szo), 18.04
Formázással, első körben. Indentálj és a megfelelő helyeken használj szóközt. A jQuery() függvény helyett használhatod a $()-t, ami rövidebb és így jobban olvasható. JavaScriptben nincs különbség a ' és a " között. Döntsd el, melyiket használod, és maradj következetes (és használd minden sztring körül, nem úgy, mint a fenti példában). A magyar nevektől a kódban a legtöbbeket kirázza a hideg, komolyabb, nemzetközi közegben pedig fel sem merülhet, ezt fontold meg.
2

Magyar

Pallosi Péter · 2013. Már. 2. (Szo), 18.34
Magyar csak így gyors beírtam valamit ez nem a rendes kód természetesen minden ANGOL
jQuery() lecserélve formázás kész még esetleg amivel hatékonyabb lenne a kód vagy esetleg valamivel jobban megírni más algoritmus szerint?
4

Tisztelt meg azokat, akiktől

Joó Ádám · 2013. Már. 2. (Szo), 18.38
Tisztelt meg azokat, akiktől tanácsot kérsz, hogy rászánod az időt a kérdésre, többek között a példakódra.

A megoldás egyébként rendben van.
3

Kapcsolat

Hidvégi Gábor · 2013. Már. 2. (Szo), 18.35
Minden kapcsolódó témának külön fórumbejegyzést tervezel?
5

Igen

Pallosi Péter · 2013. Már. 2. (Szo), 18.38
Igen esetleg gond?
6

Ez egy önálló probléma, a

Joó Ádám · 2013. Már. 2. (Szo), 18.40
Ez egy önálló probléma, a másik egy általános kérdés volt.
7

Tökéletes

Pallosi Péter · 2013. Már. 2. (Szo), 18.43
Tökéletes megfogalmazás +1
8

.parent()

vrnagy · 2013. Már. 2. (Szo), 19.07
A 
jQuery(jQuery(this).parent()).addClass("active");
helyett hasznald a 
$(this).parent().addClass("active");
A .parent() egy jQuery objektumot ad vissza, igy nem kell megegyszer letrehozni
9

Működő

Pallosi Péter · 2013. Már. 2. (Szo), 19.17
Működőképes a dolog
10

A névütközések és szemetelés

Karvaly84 · 2013. Már. 2. (Szo), 19.52
A névütközések és szemetelés elkerülésére meg:

(function($) {
  // ...
})(jQuery);
11

A jQuery() globális, látszik

Joó Ádám · 2013. Már. 2. (Szo), 20.14
A jQuery() globális, látszik a zárványból anélkül is, hogy paraméterként átadnád.
12

Az világos, de a dollár már

Karvaly84 · 2013. Már. 2. (Szo), 20.16
Az világos, de a dollár már nem biztos ha be van húzva mondjuk egy Prototype.js mellé ne adjisten. Egyébként részlet kérdés hol adjuk át a jQuery-t, lehet paraméterként, vagy a closure-ben, nem oszt nem szoroz :)
13

Az ahref-et hol használod fel

asam9 · 2013. Már. 2. (Szo), 22.28
Az ahref-et hol használod fel ill. az ahref_class honnan jön?
14

Sehonnan

Pallosi Péter · 2013. Már. 2. (Szo), 22.41
Sehonnan mint már írtam ezt csak most írtam nincsenek az adatok deklarálva
15

Akkor majd deklaráld azokat

asam9 · 2013. Már. 2. (Szo), 23.04
Akkor majd deklaráld azokat is, amik most hiányoznak, mert így az ahref nincs használva és nincs ahref_class változó sem. A jelenlegi kódod alapján valahogy így nézne ki a többiek által fentebb leírtak szerint:

(function ($) {
    $(document).ready(function () {

        var $fullek = $('.fullek');

        $fullek.on('click', function () {

            var $this = $(this),
                  ahref = $this.attr('href');

            $fullek.removeClass('active');
            $this.parent().addClass('active');
            $('div[class*="tab-"]').hide();
            $("." + ahref_class).show();
        });
    });
}(jQuery));
Azokat a csomópontokat, amiket többször is felhasználsz, érdemes eltárolni egy változóban, hogy ne kelljen újra és újra kikeresni őket – a példában ilyenek a $(this) és a $('.fullek') – és ezeket használni utána a programban.
Amikor változókat deklarálsz, akkor "egyszer" érdemes használni a var kulcsszót és vesszővel elválasztva felsorolni a többit, az utolsót persze pontosveszővel zárni, tehát nem külön var kulcsszó minden egyes változódeklaráláskor. (Tudom, hogy neked nem volt több egymás után, csak írtam, hátha érdekel).
17

Vagy egyszerűbben:

Poetro · 2013. Már. 4. (H), 14.23
Vagy egyszerűbben:
    jQuery(function ($) {  
  
        var $fullek = $('.fullek');  
  
        $fullek.on('click', function () {  
  
            var $this = $(this),  
                  ahref = $this.attr('href');  
  
            $fullek.removeClass('active');  
            $this.parent().addClass('active');  
            $('div[class*="tab-"]').hide();  
            $("." + ahref_class).show();  
        });  
    });
16

Én így csinálnám...

prototype · 2013. Már. 4. (H), 13.45

$(document).ready(function() {

    $(".fullek").click(function()
    {

        $(this).removeClass("active").parent().addClass("active");
        $('div[class*="tab-"]').hide(400, function()
        {
            $("."+ahref_class).show();
        });

    });

});
18

on a parent-en

szabo.b.gabor · 2013. Már. 6. (Sze), 09.59
/*
<!--css-->
<style>
.fulek div{
display:none;
}

.fulek .active div{
display:block;
}
</style>
<!--html-->
<ul class="fulek">
	<li>
		<a href="#regisztracio">regisztracio</a>
		<div>
			regisztracio tartalom
		</div>
	</li>
	<li>
		<a href="#belepes">belepes</a>
		<div>
			belepes tartalom
		</div>
	</li>
	<li>
		<a href="#elfelejtett-jelszo">elfelejtett jelszo</a>
		<div>
			elfelejtett jelszo tartalom
		</div>
	</li>
<ul>
 * */
//ami itt van, az domready-re lefut, az neked pont jo is lesz
$(function(){
	//ha az ul element-re teszed az esemeny kezeleset, akkor csak egyszer jon letre, lehetne $('.fulek a').on('click',function(){}); is, de akkor minden link-re letrejonne a esemenykezelo
	$('.fulek').on('click','a',function(e){
		var $li=$(this).closest('li'),$ul=$li.closest('ul');
		
		$ul.find('li').removeClass('active');
		$li.addClass('active');
	});
});
a css-en kell reszelni, hogy úgy nézzen ki ahogy szeretnéd, de float:left a li elemekre, position:relative az ul-re, valamint a div-ekre position:absolute, left:0, top:20px, már kinéz valahogy..

persze az sem kizárt, hogy neked ez a markup nem jó.

érdemes lehet úgy alakítani a dolgokat, hogy show(), hide() metódusokat kerüld, mert ezek a dolgok a tag-ek style attribútumait hánnyák teli, ami akár hátrányos is lehet (nem biztos), helyettük a parent-nek adni valami osztályt (select-* félét), és css-sel szabályozni az alatta lévő elemek eltűnését. lehet, hogy messzire mentem.