| Mladen Sevic |
26. 12. 2011. 20:39 |
Active state i anchor pitanje
Pozdrav,
imam prostu HTML stranu sa dosta podataka. U sidebar imam 4-5 linkova tipa <li><a></a></li> koji vode / linkuju ka anchorima na toj istoj strani. Jos sam ubacio i jquery kako bi sve to klizillo kako valja. Ali me interesuje jedna stvar. Zelim da kada kliknem na link on bude u active state tj obojen drugacije od ostalih.
Znaci klik na sidebar link odvede na anchor i da ima drugaciji stil od ostalih linkova npr isti stil kao za hover. Da li je to moguce ostvariti? |
| Mladen Sevic |
26. 12. 2011. 21:03 |
Jos jednostavnije objasnjeno.
Kôd:
<ul>
<li><a href="#anchor-1">anchor one</a></li>
<li><a href="#anchor-2">anchor second</a></li>
<li><a href="#anchor-3">anchor third</a></li>
</ul>
Kako da na klik dodelim klasu tipa .current <a> tagu. I da ona ostane sve dok ne kliknem na drugi <a>tag tj link. |
| webarto |
26. 12. 2011. 21:08 |
Stavi ID sidebar na taj UL.
PHP kôd:
$('#sidebar a').click(function() {
$('#sidebar a').removeClass('current');
$(this).addClass('current');
});
^ Ovo je jQuery, stavi <script> prije </body> |
| Mladen Sevic |
26. 12. 2011. 21:25 |
Kôd:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing</title>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="application/javascript">
$('#sidebar a').click(function() {
$('#sidebar a').removeClass('current');
$(this).addClass('current');
});
</script>
<style type="text/css">
.current {
color:#F00;
}</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="#anchor-1">anchor one</a></li>
<li><a href="#anchor-2">anchor second</a></li>
<li><a href="#anchor-3">anchor third</a></li>
</ul>
</div>
</body>
</html>
ovako nesto? |
| ivanhoe |
27. 12. 2011. 00:23 |
ovo ti nece raditi jer se taj javascript izvrsi pre nego sto browser zna da postoje neki linkovi (nije dotle jos stigao u parsiranju, posto ide redom). Zato postoje 2 resenja:
- old school je da samo script pomeris u html-u ispod DOM elementa sa kojim radis, znaci ispod liste u ovom slucaju.
- modernije i vise u duhu jquerija je da js stavis unutar onDomReady handlera, sto se u jQueriju obicno pise ovako: $(function () { //ovde onaj kod }); , a pogledaj ready() metodu u jQuery dokumentaciji za vise informacija
Prednost prvog resenja je sto ne cekas da se ceo DOM izrenderuje, sto ponekad dobro dodje, ali inace u 99% situacija zeleces da koristis ovaj drugi nacin, to je sad standard
|
| Mladen Sevic |
27. 12. 2011. 02:32 |
Pozdrav,
hvala na odgovorima. Ivanhoe probao sam sa ovim fixom da stavim code ispod liste i radi savrseno.
medjutim to sa jQuery nisam razumeo bas najbolje posto sam ja dizajner prevashodno i poceo sam da radim html/css. Tako da mi je sam JS prilicno stran za sada.
Ako bih mogao da dobijem primer jQuery koda bio bih zahvalan, ukoliko ne opet hvala na prvom primeru.
|
| webarto |
27. 12. 2011. 02:37 |
http://api.jquery.com/ready/
PHP kôd:
$(document).ready(function() {
$('#sidebar a').click(function() {
$('#sidebar a').removeClass('current');
$(this).addClass('current');
});
});
Javascript mora da se izvrši kada se HTML (DOM) učita, u tvom slučaju će se izvršiti prije nego što se HTML učita, odnosno neće raditi, ovo "sačeka" da se učita HTML i tek onda okine. Možeš staviti i na dno skripte, i u tom slučaju radiće, jer se učitava odozgo prema dole.
|
| Mladen Sevic |
27. 12. 2011. 03:00 |
Veliko hvala! Radi. Probacu sada za primer koji meni treba.
Usputno pitanje koju literaturu da koristim kao apsolutni pocetnik za ucenje JS/AJAX/jQuery ?
|
| djipko |
27. 12. 2011. 08:23 |
|
| Br@nkoR |
27. 12. 2011. 14:01 |
Možeš i ići nešto kao:
Kôd:
$(function() {
$(window).bind('hashchange load', function() {
var fragment = location.href.replace(/^[^#]*#?(.*)$/, '$1' );
$('#sidebar a').removeClass('current');
$('#sidebar a[href$=#' + fragment + ']').addClass('current');
});
});
Da bi bilo i selektovano ukoliko korisnik pristupa stranici putem stranica.html#anchor-1 |
| Vreme je GMT +2. Trenutno vreme je 02:19. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.
