Jquery - Hash, Hash, Hash

fikotek

Ahojte,

mam Tab a v nem mam dalsi Tab. Muzete mi prosim rict jak provazat 2 Hashe?
Neco jako:
nazevURL.php#tab1#tab2
nazevURL.php#tab1#tab2.2

Tusi nekdo jak tohohle docilit?

*****HERO*****

ja by som sa spytal inak. tusi nekdo wocogo?

sharky-no

chce mat aktivny tab, a vnom dalsi tab. a chce mat unikatne url pre kazdy jeden tab co tam ma.

fikotek

Presne jak rika sharky-no

Takze kdyz nekomu poslu URL tak se mu napr. otevre treti zalozka v prvnim tabu a pata zalozka v druhem tabu. Jak neceho takoveho docilit?

nazevURL.php#tab1/tab2
v javascripte si cez window.location.hash prečítaš hash, cez split ho rozbiješ na časti a spracuješ ako potrebuješ. Ešte krajšie riešenie by bolo namiesto lomítka použiť pomlčku, a tomu prispôsobiť rovno triedy, aby si to nemusel rozbíjať ale použil štýlom

Kód: Vybrať všetko

var tab = $("." + window.location.hash);
tab.parent().show(); //zobrazíš nadradený tab
tab.show(); //zobrazíš tab

show() je len pre ilustráciu, zrejme to budeš robiť menením nejakej triedy, takže tam bude namiesto toho toggleClass('hidden') alebo niečo podobné. A v tom získavaní parentu bude tiež nejaká kontrola či je to vôbec tab (alebo neprišiel v hashi iba parent bez potomka)

fikotek

Diky audio, asi to myslis dobre, ale moc nerozumim tomu co si napsal

Stale nejak nevim jak vytvorit tu inikatni URL. Ja myslel ze se jen budou nejak skladat #nazev#nazev a kdyby klidne byli i tri taby v sobe tak #nazev#nazev#nazev

//autoeditácia príspevku (18 Jún 2015, 11:09)
Doposud je to reseno takto.

Kód: Vybrať všetko

function zobraz(idecko){
	var i;
	for(i=0; i<=20; i++){
		if(document.getElementById('odkaz_z'+i))document.getElementById('odkaz_z'+i).className='';
		if(document.getElementById('obsah_z'+i)) document.getElementById('obsah_z'+i).className='hiden';
	}

	document.getElementById('odkaz_'+idecko).className='active';
	document.getElementById('obsah_'+idecko).className='view';

}

function zobraz_table(idecko){
	var i;
	for(i=0; i<=20; i++){
		if(document.getElementById('tab_z'+i))document.getElementById('tab_z'+i).className='';
		if(document.getElementById('table_z'+i)) document.getElementById('table_z'+i).className='hiden';
	}
	document.getElementById('tab_'+idecko).className='active';
	document.getElementById('table_'+idecko).className='view';

}

function init_zalozky (){
	var hash_tag = window.location.hash;

	if ( !hash_tag ){
        return false;
	}

	hash_tag = hash_tag.replace ("#", "");

	if(hash_tag == 'features') zobraz('z1');
	if(hash_tag == 'technical_data') zobraz('z2');
	if(hash_tag == 'download') zobraz('z3');
	if(hash_tag == 'optional_accessories') zobraz('z4');
	if(hash_tag == 'we_recommend') zobraz('z5');
	if(hash_tag == 'video') zobraz('z6');
}

toto

Kód: Vybrať všetko

if(hash_tag == 'features') zobraz('z1');
   if(hash_tag == 'technical_data') zobraz('z2');
   if(hash_tag == 'download') zobraz('z3');
   if(hash_tag == 'optional_accessories') zobraz('z4');
   if(hash_tag == 'we_recommend') zobraz('z5');
   if(hash_tag == 'video') zobraz('z6');

zmeň na

Kód: Vybrať všetko

zobraz(hash_tag);

v linkoch si poupravuj tie hashtagy z tých z1 - z5 na jednotlivé tie názvy features, download atď, tým pádom poupravovať aj tie classy v html. Nadradený tab bude úplne rovnako fungovať, akurát si ten hash_tag rozdelíš podla pomlčky aby si zistil nadradený a podradený, lebo dva hashe nedáš do linku, tak si ich treba spojiť nejakým znakom.

a tie šialené cykly daj preč, uprav to takto:

Kód: Vybrať všetko

function zobraz(idecko){
   $('.active').removeClass('active');
   $('.view').removeClass('view').addName('hidden');
   $('#odkaz_'+idecko).addClass('active');
   $('#obsah_'+idecko).addClass('view');
}

rovnako tak aj tú druhú funkciu. Pýtaš sa na jquery, tak ho aj používaj

jorg22

Ja by som narhoval riesit to tak ze v URL bude len jedno id napr #tab5. Kazdemu tabu daj nejaku triedu napr. 'tab' a potom pouzit len jednoduchu funkciu nieco na styl:

Kód: Vybrať všetko

$( window.location.hash ).show();
$( window.location.hash ).parents('.tab').show();

Kod na dva riadky a vzdy orvori spravny tab lebo vies ze chces otvorit jeho nadradene taby.

fikotek

No HTML vypada takto.

Kód: Vybrať všetko

<div id="zalozky" class=" ">
    <a href="#features" id="odkaz_z1" onclick="zobraz('z1')" class='active'>Popis</a>
    <a href="#technical_data" id="odkaz_z2" onclick="zobraz('z2')" >Technická data</a>
    <a href="#download" id="odkaz_z3" onclick="zobraz('z3')" >Download</a>
    <a href="#optional_accessories" id="odkaz_z4" onclick="zobraz('z4')" >Volitelné příslušenství</a>
    <a href="#we_recommend" id="odkaz_z5" onclick="zobraz('z5')" >Doporučujeme</a>
    <div id="where-to-buy"><a href="/cz/distributori-firemni.php">Kde koupit</a></div>
</div>

<div id="zalozky_content" class="">

	<!--   Features   -->
    <div id="obsah_z1"></div>

    <!--   Tech. data   -->
    <div id="obsah_z2" class="hiden"></div>

    <!--   Dokumenty   -->
    <div id="obsah_z3" class="hiden"></div>

    <!--  accessories / prislusenstvi  -->
    <div id="obsah_z4" class="hiden">

    	<!--zalozky-->
    	<div id='sub_zalozky'>
      <a href='#' id='tab_z1' onclick="zobraz_table('z1'); return false;" class='active'>Ostatní příslušenství</a>
      <a href='#' id='tab_z2' onclick="zobraz_table('z2'); return false;" >Monitorovací software</a></div>
      <div  id="table_z1" class="wiev"></div>
      <div  id="table_z2" class="hiden"></div>

      <div class="clear"></div>
    </div>

    <!--   We recommend / doporucujeme   -->
    <div id="obsah_z5" class="hiden"></div>

    <!--   video   -->
    <div id="obsah_z6" class="hiden"></div>

</div>

Jquery - Hash, Hash, Hash

Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash

Re: Jquery - Hash, Hash, Hash