Home/ Questions/Q 3438852
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:14:17+00:00

I’m using YUI3 TabView component, and I’d like to be able to get the

  • 0

I’m using YUI3 TabView component, and I’d like to be able to get the index of the currently selected tab. I’ve been looking through the api docs, but can’t seem to find the relevant way to do this.

http://developer.yahoo.com/yui/3/api/module_tabview.html

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    “indexOf” actually works if you use the “tabview.get(‘selection’)” as the argument.

    Example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    <script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
    </script>
    </head>
    <body>
      <body class="yui3-skin-sam">
      <p id="msg"></p>
    <input type='button' value='Button' id='button'/>
    <div id="demo">
        <ul>
            <li><a href="#foo">foo</a></li>
            <li><a href="#bar">bar</a></li>
            <li><a href="#baz">baz</a></li>
        </ul>
        <div>
            <div id="foo">foo content</div>
            <div id="bar">bar content</div>
            <div id="baz">baz content</div>
        </div>
    </div>
    <script>
var YUI;
YUI().use('event', 'node', 'tabview', function (Y) {
  Y.one('#msg').set('innerHTML', 'message area');

  var tabview = new Y.TabView({srcNode: '#demo'});
  tabview.render();

  var displayIndex = function (tabview) {
    var sel = tabview.get('selection');
    var idx = tabview.indexOf(sel);
    Y.one('#msg').set('innerHTML', 'Selected Tab Index = ' + idx);
  }
  displayIndex(tabview);

  Y.after('click', function(e) {
    displayIndex(this);
  },'body',tabview);

});
    </script>
    </body>
</html>
    • 0