CSS Codes
CSS Layouts
View RSS Feed

molendijk

A URL-driven tabbing system

Rate this Entry
2 Comments
by
molendijk
, 05-29-2016 at 10:40 PM (11764 Views)
There are many 'tab content scripts' on the web that let you organize hidden DIV contents into a tab interface, with the desired content appearing when a tab is clicked on.
But most of the time, these scripts merely do that and nothing else. They don't add entries to the browser's history, which implies that the 'panels' are not bookmarkable / that the native browser's back/forward button does not change the state of the selected tabs. And if the scripts use the hash tag for correcting this, it doesn't always work (https://hanshillen.github.io/jqtest). And if it does work, a 'hash-script' is used (like on http://filamentgroup.github.io/Acces...pdateHash.html) that is far too complicated for the job.
I was a bit frustrated about this, so I wrote a 'tabbing system' of my own. I hope it serves its purpose. Demo and instructions here.

Submit "A URL-driven tabbing system" to del.icio.us Submit "A URL-driven tabbing system" to StumbleUpon Submit "A URL-driven tabbing system" to Google Submit "A URL-driven tabbing system" to Digg

Updated 06-05-2016 at 10:18 PM by molendijk

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. molendijk's Avatar
    2 June 2016.
    I added info about embedding javascript-based seamless iframes in the panels and added a panel displaying the complete source code for a basic URL-driven tabbing system.
  2. molendijk's Avatar
    4 June 2016
    I modified the lines for highlighting selected tabs, as a result of which there's no need anymore for putting IDs on the tab-links. Putting content into a panel is now dead simple:
    Code:
    <a class="display_panel" href="#some_panel" >Some tab</a>

<div style="position: absolute; display: none; ">
<div id="some_panel">
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur br>bla bla.
</div>
</div>