HTML

<div data-role="page" id="settingsPage"> <h2>Settings</h2> <div data-role="tabs"> <ul data-role="listview" data-inset="true" class="tablist-left"> <li><a href="#loginLogoutTab" data-ajax="false">Login</a></li> <li><a href="#aboutTab" data-ajax="false">About</a></li> </ul> <div id="loginLogoutTab" class="ui-body-d tablist-content"> <h1>Press OK to login</h1> </div> <div id="aboutTab" class="ui-body-d tablist-content"> <h1>About this app, bla bla</h1> </div> </div> </div>

There is no javascript written at the moment. I expect just to see no content, until I click on one of the items. However, I see both of conent

Even if I click on items, nothing changes.

I'm using jQM 1.4.5. Basically it's based on DEMO code for tabs in jQM website.

Moreover, if I set active item using css class="ui-btn-active" in HTML, I've got this: