Report abuse 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
  <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>

  <title>jQuery Tools standalone demo</title>
  <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
  <script src="http://beta.firehoze.com/javascripts/jquery.cookie.js"></script>
</head>

<body>
  <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
  <style>
    div.panes div {
      display:none;
      padding:15px 10px;
      border:1px solid #999;
      border-top:0;
      height:100px;
      font-size:14px;
      background-color:#fff;
    }
  </style>

  <ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>

  <div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
  </div>

  <script>

    $(function() {
      var api = $("ul.tabs").tabs("div.panes > div", {
        api:true,
        // set the index from a cookie, if a cookie value exists
        initialIndex: $.cookie('cookie_selected_tab_index') !== 'undefined' && $.cookie('cookie_selected_tab_index') != null  ?  $.cookie('cookie_selected_tab_index') : 0
      });

      api.onClick(function(event, tabIndex) {
        $.cookie('cookie_selected_tab_index', tabIndex, { expires: 7 }); // set cookie
      });
    });

  </script>

</body>