This is a message.

Handling browsers back button

Here we use a history plugin to enable support for the browser's back and forward buttons. Click on the tabs and then use the history buttons (browser arrow buttons) to see it in action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.

Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.

Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.

standalone demo

HTML coding

To enable history support we must assign unique anchor labels to the tabs. Here we just use the simple labels t1, t2, t3 and t4: 

<!-- tabs -->
<ul class="css-tabs">
  <li><a id="t1" href="#tab1">Tab 1</a></li>
  <li><a id="t2" href="#tab2">Second tab</a></li>
  <li><a id="t3" href="#tab3">A ultra long third tab</a></li>
</ul>
 

<!-- the panes are defined normally, no need for labels -->
<div class="css-panes">
  <div> lorem ipsum ...</div>
  <div> lorem ipsum ...</div>
  <div> lorem ipsum ...</div>
  <div> lorem ipsum ...</div>
</div>

HTML

JavaScript coding

We set up things as usual with the additional history plugin which is simply chained after the tabs() call. You can configure multiple tabs on the same page in the same way. 

$(function() {
  $(".css-tabs:first").tabs(".css-panes:first > div", { history: true });
});

JavaScript