Question

I’ve inherited support for a rails site with jQuery and I’m still learning jQuery. Looks like they’re using tab navigation, and trying to trigger a click on the next tab with a ‘Next’ link below. Here’s the relevant snippet:

<script type="text/javascript">
    jQ().ready(function(){
            jQ("#tabs").tabs();
    });
</script>
...
<div id="tabs">
    <ul>
            <li><a href="#tab1"><span>Tab1</span></a></li>
            <li><a href="#tab2"><span>Tab2</span></a></li>
            <li><a href="#tab3"><span>Tab3</span></a></li>
    </ul>
    <div id="tab1">stuff
      <a href="#" onclick="jQ('#container>ul>li:eq(1)').find('a').trigger('click');">Next</a>
    </div>
    <div id="tab2">stuff
    </div>
    <div id="tab3">stuff
    </div>
</div>

When you click on the Next link, nothing happens. I’m still trying to parse the syntax of jquery there. From what I read in one of the tutorials, the ‘#container’ is looking for an element with the id=’container’, right? Could that be the problem? Or does ‘#container’ have special meaning with jQuery?

Answer 1

You’re right, ‘#container’ is looking for an element with the id=’container’. #tabs in place of #container could help the code you’ve given here.

      <a href="#" onclick="jQ('#tabs>ul>li:eq(1)').find('a').trigger('click');">Next</a>