Nav Tab Trigger click

Question

User1858009984 posted

How to trigger a click event on the nav tab on page load inside document.ready function and when clicked the tab should be highlighted

<ul class="nav nav-tabs">
<li class="" id="request"><a href="#requesttab" data-toggle="tab">Requests</a></li>
<li id="Approval"><a href="#approvaltab" data-toggle="tab">Approval</a></li>
</ul>

Answer 1

User475983607 posted

$(function () {
    $('#requesttab').click();
});

jQuery selector and event references.

https://api.jquery.com/category/selectors/

https://api.jquery.com/click/

If you are trying to make the Nav active then add the "active" class to the tag.  Use standard Razor syntax to set the class or you can use jQuery.   This requires that you come up with a deigns and write a little code.

Please read the Bootstrap documentation.

https://getbootstrap.com/docs/4.0/components/navs/#base-nav

Answer 2

User1535942433 posted

Hi Ravindranath M,

 According to your description, I suggest you could  add a click event for the a tag. Add  css to one of the li  and at the same time  remove the other lis' css.

If this is not you need,you could post more details codes of css.

More details ,you could refer to below codes:

 <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function () {          
            $('.nav-tabs li a').click(function () {
                $(this).closest("li").addClass('highlight').siblings().removeClass('highlight');
                return (false);   // no default behavior from clicking on the link
            })
        })
    </script>
  <style>
      .highlight {background-color: #F00; color: #FFF;}
      .highlight a {color: #FFF;}
      .nav-tabs li {display: inline; padding: 0 10px;}
      .nav-tabs li a {text-decoration: none;}
  </style>

  <div>
            <ul class="nav nav-tabs">
                <li class="" id="request"><a href="#requesttab" data-toggle="tab">Requests</a></li>
                <li id="Approval"><a href="#approvaltab" data-toggle="tab">Approval</a></li>
            </ul>
        </div>

Result:

Best regards,

Yijing Sun

Answer 3

User-2054057000 posted

On the click event you can simply add a class class to the element using jQuery addClass() method. Then define the class in your stylesheet.

You have 2 li's here - request, approval. You can simply create 2 click event's for these and ten use addClass() method for bringing out the desired results. I recommend you to chek the tutorial link I have given you and it will be straightforward.