Avatar billede 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
Avatar billede 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)
Avatar billede 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 ??
Avatar billede jakobdo Ekspert
14. august 2014 - 11:47 #3
Avatar billede 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();
  }
});
Avatar billede jakobdo Ekspert
14. august 2014 - 11:50 #5
Det ser ikke helt dumt ud og skal nok kunne passes ind.
Avatar billede 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.
Avatar billede jakobdo Ekspert
14. august 2014 - 11:55 #7
Jeg tror du må vise noget kode så, ellers er det svært at hjælpe.
Avatar billede flemche Nybegynder
14. august 2014 - 12:26 #8
Ok, jeg flækker lige noget sammen.
Avatar billede 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>
Avatar billede 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?
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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