I would like a button to trigger a link using jquery/JavaScript

Question

I have a nav-pills element incorporated in my web page, which works perfectly.

The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.

What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.

<div class="card">
    <div class="header">                
        <div class="col-sm-12 text-center">
            <ul class="nav nav-pills center-pills">
                <li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
                <li class="test"><a href="#menu1" class="test">Menu 1</a></li>  
            </ul>
        </div> 
        </div>
        <div class="content">    
            <div class="tab-content">
                <!--first tab-->
                <div id="home" class="tab-pane fade in active">
                    <h3>Introduction</h3>
                    <p>Random Text </p>
                    <button id="next-step" class="btn btn-basic">Next</button>
                </div>
                <div id="menu1" class="tab-pane fade in active">
                    <h3>Menu1</h3>
                    <button id="back-step" class="btn btn-basic">Back</button>
                </div>
           </div>
       </div>
    </div>
</div>

My JavaScript looks like:

$('#back-step').click(function(){
   $('link1').trigger("click");
});

$(".nav-pills a").click(function(){
    if ($('#first').hasClass('active')){
        $('#first').addClass('test').removeClass('active');            
    }
    $(this).tab('show');
});

Have you tried keeping control of what the tab indexs are? If you know the index you can navigate back and forth. It looks like you're trying to initial a click event on a link from a button click to activate your classes. Use the button as a click event and change the index of the nav pill. And have an event on the nav pill for selected index changed. The selected index change will trigger you class activation — Dylan Wright
– Dylan Wright, Commented Apr 21, 2017 at 18:01

heylookltsme · Accepted Answer · 2017-04-21 17:57:45Z

1

It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).

answered Apr 21, 2017 at 17:57

heylookltsme

1246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ale10ander Over a year ago

Another note, the original code you (@Muhammad) posted had mis-matched divs.

Collectives™ on Stack Overflow

I would like a button to trigger a link using jquery/JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related