CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

flemche Nybegynder

14. august 2014 - 09:49 Der er 10 kommentarer

Hvordan vender man tilbage til en bestemt TAB...

Hejsa

Jeg har en HTML side med nogle TAB's (Tabbed navigering).
Fra hver af de TAB's som er på siden kan man navigerer videre til en ny HTML side.

Mit problem er at hvis jeg fra den nye HTML side trykker back vil jeg gerne ramme den TAB, som jeg kom fra og ikke den første TAB som den automatisk vælger.

Hvoran gør jeg dette ???

/Flemming

Synes godt om

jakobdo Ekspert

14. august 2014 - 11:21 #1

Mit bud er du skal koble dine tabs sammen med noget HASH navigation.
Ellers kan du ikke få historik med ind i dit "system", som jeg ser det.
Men jeg har før taget fejl, så gør det gerne igen. :o)

Synes godt om

flemche Nybegynder

14. august 2014 - 11:43 #2

Der var nogen på nettet som nævnte et par funktioner "getActiveTab(tabId) & setActiveTab(tabId)" men det er ikke noget jeg har forsket mere I pt.

Kunne du uddybe HASH navigation lidt mere ??

Synes godt om

jakobdo Ekspert

14. august 2014 - 11:47 #3

Noget ala dette: http://dev.sencha.com/ext/5.0.1/examples/history/history.html#main-tabs:tab1:subtab1

Synes godt om

flemche Nybegynder

14. august 2014 - 11:47 #4

Jeg fandt den her stump kode på nettet, men da jeg ikke er en superhelt til Objectorienteret programmering kan jeg ikke helt gennemskue hvordan den virker og hvordan jeg får den koblet sammen med min html side.

$(document).ready(function() {
var activeTab, lastTab;
activeTab = $("[href=" + location.hash + "]");
activeTab && activeTab.tab("show");
$("a[data-toggle=\"pill\"]").on("shown.bs.tab", function(e) {
return localStorage.setItem("lastTab", $(this).attr('href'));
});
lastTab = localStorage.getItem("lastTab");
if (lastTab) {
return $("a[href=\"" + lastTab + "\"]").click();
}
});

Synes godt om

jakobdo Ekspert

14. august 2014 - 11:50 #5

Det ser ikke helt dumt ud og skal nok kunne passes ind.

Synes godt om

flemche Nybegynder

14. august 2014 - 11:51 #6

Ja det eksemple nærmer sig.

Mit problem er dog at jeg er gået væk fra siden med den Tabbede navigering så jeg er nok nød til at overfører tab indexet via en GET/POST I URL'en.

Synes godt om

jakobdo Ekspert

14. august 2014 - 11:55 #7

Jeg tror du må vise noget kode så, ellers er det svært at hjælpe.

Synes godt om

flemche Nybegynder

14. august 2014 - 12:26 #8

Ok, jeg flækker lige noget sammen.

Synes godt om

flemche Nybegynder

15. august 2014 - 14:18 #9

Nå jeg har siddet og rodet lidt med det, men er løbet ind I at jeg ikke kan få HASH navigationen til at virke.

Mit URL vil ikke vise mit HASH tag.

Hvad gør jeg forkert ????

<!DOCTYPE html>

<head>
<script src="http://code.jquery.com/jquery-latest.min.js"

type="text/javascript"></script>
<link rel = "stylesheet" href = "..\CSS\BasicStyles.css">
<script type="text/javascript">

$(document).ready(function () {

// This function will run when you click on on of the tabs
$('.tabs a').click(function () {
// save $(this) in a variable for efficiency
var $this = $(this);

// hide panels
$('.panel').hide();
$('.tabs a.active').removeClass('active');

// add active state to new tab
$this.addClass('active').blur();

// retrieve href from link (is id of panel to display)
var panel = $this.attr('href');

// show panel
$(panel).fadeIn(250);

// don't follow link down page
return (false);
}); // end click

// open first tab
$('.tabs li:first a').click();

}); // end ready

</script>
</head>

<body>

<div id="wrapper">
<section id="main_section">
<h1>Portfolio List</h1>
<hr />
</br> </br>

<div class="tabbedPanels">
<ul class="tabs">
<li><a href="#tab1"><span>Overview</span></a></li>
<li><a href="#tab2"><span>Fixed Income</span></a></li>
<li><a href="#tab3"><span>Security Finance</span></a></li>
<li><a href="#tab4"><span>Other Systems</span></a></li>
<li><a href="#tab5"><span>Trading Technology</span></a></li>
<li><a href="#tab6"><span>FX</span></a></li>
<li><a href="#tab7"><span>All Systems</span></a></li>
</ul>

<div class="panelContainer">

<div class="panel" id="tab1">
<h2>Panel 1 content</h2>
</div>

<div class="panel" id="tab2">
<h2>Panel 1 content</h2>
</div>
</div>
</div>
</section>

...... osv for resten af tabs

</div>

</body>

</html>

Synes godt om

jakobdo Ekspert

15. august 2014 - 15:00 #10

Kunne jeg være så fræk at bede dig om at oprette det i f.eks. jsfiddle.com eller jsbin.com og smide linket herind?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS