Overview

This is a simple JavaScript plugin for a hashchange-driven tabbed content switcher. Personally I'm not a tabsphiliac, but I needed those a few times recently and decided to make a semi-universal solution.

View on GitHub

Download v2.2

Quick run-down of features:

Getting started

You will need those two files:

Build a html HashTabber section with this basic setup:

<ol class="hashTabber-nav" data-hashtabber-id="foo">
    <li><a>First item</a></li>
    <li><a>Second item</a></li>
    <li><a>Third item</a></li>
</ol>
<ol class="hashTabber-data" data-hashtabber-id="foo">
    <li>This is the first item content.</li>
    <li>This is the second item content.</li>
    <li>This is the third item content.</li>
</ol>

Important things for the whole thing to work are:

Then just run the damn thing:

var tabber = new HashTabber();
tabber.run();

If the content changes after HashTabber was triggered, you can just use the .run() method again.

Options

For some special situations you can define any of the options for classes and data attributes names through the hashTabber() options object parameter:

var tabber = new HashTabber(options = {
    classActive: 'active',
    classData: 'hashTabber-data',
    classNav: 'hashTabber-nav',
    dataDefault: 'data-hashtabber-default',
    dataId: 'data-hashtabber-id',
    dataPair: 'data-hashtabber-pair',
});

You can define some special options through the HTML data attributes:

Hidden features

It's also worth to mention, that:

Themes

This is something rather varied, but with theming, I would personally go with an additional hashTabber-themename class for both ols. This blank example could be a good start:

ol.hashTabber-nav.hashTabber-themename {
    > li {
        &.active {
            a {
                &:hover {
                }
            }
        }
        > a {
            &:hover {
            }
        }
    }
}
ol.hashTabber-data.hashTabber-themename {
    > li {
        &.active {
        }
    }
}

Examples

Below is an example with basic theming applied. Notice that you could use an outside #dinosaurs=velociraptor link to change the tab.

    Species:

  1. Trilobite
  2. Velociraptor
  3. Pterosaur
  4. Lambeosaurus magnicristatus
  5. Eoraptor

  1. Trilobite

    Trilobites are a well-known fossil group of extinct marine arthropods that form the class Trilobita. Trilobites form one of the earliest known groups of arthropods. The first appearance of trilobites in the fossil record defines the base of the Atdabanian stage of the Early Cambrian period (521 million years ago), and they flourished throughout the lower Paleozoic era before beginning a drawn-out decline to extinction when, during the Devonian, all trilobite orders except Proetida died out. Trilobites finally disappeared in the mass extinction at the end of the Permian about 250 million years ago. The trilobites were among the most successful of all early animals, roaming the oceans for over 270 million years.

    Read more about Trilobite

  2. Velociraptor

    Velociraptor is a genus of dromaeosaurid theropod dinosaur that lived approximately 75 to 71 million years ago during the later part of the Cretaceous Period.Two species are currently recognized, although others have been assigned in the past. The type species is V. mongoliensis; fossils of this species have been discovered in Mongolia. A second species, V. osmolskae, was named in 2008 for skull material from Inner Mongolia, China.

    Read more about Velociraptor

  3. Pterosaur

    Pterosaurs were flying reptiles of the clade or order Pterosauria. They existed from the late Triassic to the end of the Cretaceous Period (228 to 66 million years ago). Pterosaurs are the earliest vertebrates known to have evolved powered flight. Their wings were formed by a membrane of skin, muscle, and other tissues stretching from the ankles to a dramatically lengthened fourth finger. Early species had long, fully toothed jaws and long tails, while later forms had a highly reduced tail, and some lacked teeth. Many sported furry coats made up of hair-like filaments known as pycnofibres, which covered their bodies and parts of their wings. Pterosaurs spanned a wide range of adult sizes, from the very small Nemicolopterus to the largest known flying creatures of all time, including Quetzalcoatlus and Hatzegopteryx.

    Read more about Pterosaur

  4. Lambeosaurus magnicristatus

    Lambeosaurus is a genus of hadrosaurid dinosaur that lived about 76 to 75 million years ago, in the Late Cretaceous period (Campanian) of North America. This bipedal/quadrupedal, herbivorous dinosaur is known for its distinctive hollow cranial crest, which in the best-known species resembled a hatchet. Several possible species have been named, from Canada, the United States, and Mexico, but only the two Canadian species are currently recognized as valid.

    Read more about Lambeosaurus magnicristatus

  5. Eoraptor

    Eoraptor was one of the world's earliest dinosaurs that lived ca. 231.4 million years ago, during the latter part of the Triassic Period in Western Gondwana, what is now the northwestern region of Argentina. It was a small sized (1 m (3.3 ft) long), lightly-built, ground-dwelling, two-legged bipedal saurischian, close to the ancestry of both theropods and sauropodomorphs. It is known from several well-preserved skeletons. When first described in 1993, it was considered to be one of the earliest, if not the earliest known dinosaur. Eoraptor has heterodont dentition, suggesting that it was omnivorous, and that this feeding strategy had evolved early on in dinosaurs.

    Read more about Eoraptor

This is a naked (unthemed) script in work:

  1. Baruch Spinoza
  2. Socrates
  3. Friedrich Nietzsche
  4. Marquis de Sade

  1. Baruch Spinoza (/bəˈruːk spɪˈnoʊzə/; born Benedito de Espinosa; 24 November 1632 – 21 February 1677) — later Benedict de Spinoza — was a Dutch philosopher. The breadth and importance of Spinoza's work was not fully realized until years after his death. By laying the groundwork for the 18th century Enlightenment and modern biblical criticism, including modern conceptions of the self and, arguably, the universe, he came to be considered one of the great rationalists of 17th-century philosophy. His magnum opus, the posthumous Ethics, in which he opposed Descartes's mind–body dualism, has earned him recognition as one of Western philosophy's most important thinkers. In the Ethics, "Spinoza wrote the last indisputable Latin masterpiece, and one in which the refined conceptions of medieval philosophy are finally turned against themselves and destroyed entirely." Philosopher Georg Wilhelm Friedrich Hegel said of all contemporary philosophers, "You are either a Spinozist or not a philosopher at all."

  2. Socrates (/ˈsɒkrətiːz/;[2] Greek: Σωκράτης, Ancient Greek pronunciation: [sɔːkrátɛːs], Sōkrátēs; 470/469 BC – 399 BC) was a classical Greek (Athenian) philosopher. Credited as one of the founders of Western philosophy, he is an enigmatic figure known chiefly through the accounts of later classical writers, especially the writings of his students Plato and Xenophon and the plays of his contemporary Aristophanes. Many would claim that Plato's dialogues are the most comprehensive accounts of Socrates to survive from antiquity.

  3. Friedrich Wilhelm Nietzsche (/ˈniːtʃə/ or /ˈnitʃi/; German: [ˈfʁiːdʁɪç ˈvɪlhɛlm ˈniːt͡sʃə]; 15 October 1844 – 25 August 1900) was a German philologist, philosopher, cultural critic, poet and composer. He wrote several critical texts on religion, morality, contemporary culture, philosophy and science, displaying a fondness for metaphor, irony and aphorism.

  4. Donatien Alphonse François de Sade (2 June 1740 – 2 December 1814), better known as the Marquis de Sade (French: [maʁki də sad]), was a French aristocrat, revolutionary politician, philosopher and writer, famous for his libertine sexuality. His works include novels, short stories, plays, dialogues and political tracts; in his lifetime some were published under his own name, while others appeared anonymously and Sade denied being their author. He is best known for his erotic works, which combined philosophical discourse with pornography, depicting sexual fantasies with an emphasis on violence, criminality and blasphemy against the Catholic Church. He was a proponent of extreme freedom, unrestrained by morality, religion or law. The words "sadism" and "sadist" are derived from his name.

License

CC0 1.0 Universal (it's public domain)