CODEWITHSUNDEEP
jqueryhtmldjangourl
Aylen
Aylen

Reputation: 3554

Ignore HTML element ID in URL

I am working with Django and the jQuery EasyTabs Plugin. This plugin uses an anchor that points to a container ID to create the tabs, like this:

<ul class='etabs'>
    <li class='tab'><a href="#tabs1">Tab 1</a></li>
    <li class='tab'><a href="#tabs2">Tab 2</a></li>
</ul>
<div id="tabs1">
    <h2>This is the first tab</h2>
</div>
<div id="tabs2">
    <h2>This is the second tab</h2>
</div>

So when you click the link Tab 1, the container tabs2 hides, and tabs1 appears.

My application in particular loads some components in the first tab, and when other tab is activated (it triggers an event), some of these components are moved to the container of the new active tab. The structure is complex, and checking which tab is active at first would require just too much code. Is there any way to force the user to stand in the first tab initially?

Upvotes: 1

Views: 249

Answers (2)

Aylen
Aylen

Reputation: 3554

What I needed in the end (and what I was initially looking for) was window.location. Selecting at the start a tab that is not the first one via EasyTabs' API apparently triggers a bug that causes both tabs' contents to be visible at the same time.

Using window.location.replace('#desired-tab-id') before the $('#tab-container').easytabs() function fixed the problem.

Upvotes: 1

Nils
Nils

Reputation: 5739

The hash isn't sent to the server.

Instead, can you use the API that the plugin exposes to set the tab? e.g.:

$('#outer-container').easytabs('select', '#nested-tab-3');

Upvotes: 1

Related Questions