Menu tab button doesn't work

Question

I have a CSS menu tab which base on idTabs.js , it has 3 buttons which switch between the content appeared on the menu <div> -

<div>   
          <div id="usual1" class="usual">
            <ul>
              <li><a href="#tab1" class="">Tab 1</a></li>
              <li><a href="#tab2" class="selected">Tab 2</a></li>
              <li><a href="#tab3" class="">Tab 3</a></li>
            </ul>
            <div id="tab1" style="display: none;">This is tab 1.</div>
            <div id="tab2" style="display: block;">More content in tab 2.</div>
            <div id="tab3" style="display: none;">Tab 3 is always last!</div>
          </div>
          <script type="text/javascript">
            $("#usual1 ul").idTabs();
          </script>

      </div>

(here its demo)

Now I try to edit it a little bit such that the button would be under the menu div -

<div>
          <div id="usual1" class="usual">
            <div id="tab1" style="display: none;">This is tab 1.</div>
            <div id="tab2" style="display: block;">More content in tab 2.</div>
            <div id="tab3" style="display: none;">Tab 3 is always last!</div>
          </div>  
      </div>
      <div class="usualBottom">
          <ul>
                  <li><a href="#tab1" class="">Tab 1</a></li>
                  <li><a href="#tab2" class="selected">Tab 2</a></li>
                  <li><a href="#tab3" class="">Tab 3</a></li>
          </ul>
      </div>
      <script type="text/javascript">
            $("#usual1 ul").idTabs();
      </script>

but the buttons stop working , mean they don't switch the menu content .

(here its demo)

How to fix that ?

score 1 · Accepted Answer · answered May 05 '14 at 10:19

1

I think your selector was wrong. Instead of $("#usual1 ul").idTabs(); it should have been $(".usualBottom ul").idTabs(); . See if it works.

Demo :http://jsfiddle.net/3Njy5/3/

answered May 05 '14 at 10:19

K K

17,794
4
30
39

score 0 · Answer 2 · answered May 05 '14 at 10:16

0

You need to write the ul containing tabs before the div containing content. If you need your tabs after the content or at bottom of page, you need to do that by positioning.

answered May 05 '14 at 10:16

X287

51
6

we didn't understand anything from your answer. what you try to say? – Sudharsan S May 05 '14 at 10:17
I am saying that tab structure works when first you make tabs div followed by content div. Like in the first example. In case the user wants to have the tabs shown after the content div, he can do that by using positioning method. – X287 May 05 '14 at 10:32

score 0 · Answer 3 · answered May 05 '14 at 10:17

I believe that is because you're not constructing the tabs the correct way in your second example. I think the plugin registers the individual tab contents as siblings of the tab navigation menu, and when you move them into different parents the plugin will not work.

You can, however, change the position of the menu by moving it after the tabs: http://jsfiddle.net/teddyrised/HwfF6/1/

<div id="usual1" class="usual">
    <div id="tab1" style="display: none;">This is tab 1.</div>
    <div id="tab2" style="display: block;">More content in tab 2.</div>
    <div id="tab3" style="display: none;">Tab 3 is always last!</div>
    <ul>
        <li><a href="#tab1" class="">Tab 1</a></li>
        <li><a href="#tab2" class="selected">Tab 2</a></li>
        <li><a href="#tab3" class="">Tab 3</a></li>
    </ul>
</div>

score 0 · Answer 4 · answered May 05 '14 at 10:22

You should replace elements inside of the div.

<div>

      <div id="usual1" class="usual">
        <ul>
          <li><a href="#tab1" class="">Tab 1</a></li>
          <li><a href="#tab2" class="selected">Tab 2</a></li>
          <li><a href="#tab3" class="">Tab 3</a></li>
        </ul>
        <div id="tab1" style="display: none;">This is tab 1.</div>
        <div id="tab2" style="display: block;">More content in tab 2.</div>
        <div id="tab3" style="display: none;">Tab 3 is always last!</div>
      </div>

      <script type="text/javascript">
        $("#usual1 ul").idTabs();
      </script>

  </div>

If you want the tabs be inside of wrapper, use before pseudo tag.

.usual ul:before {
    content: ".";
}

Example:

JS FIDDLE

score 0 · Answer 5 · answered May 05 '14 at 10:45

0

Try like this,

<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>

Demo : http://jsfiddle.net/3Njy5/4/

answered May 05 '14 at 10:45

Jaimin

7,964
2
25
32

Menu tab button doesn't work

5 Answers5