How to redirect to li on click

Question

How can I show li on click of a button? I want on click of assignment button, Assign Lab Room & Technican li should open.

Below is my html code for it.

<div class="box-header" id = "liid">
    <ul class="nav nav-tabs pull-left" style="cursor: move;">
        <li ><a href="#payment" data-toggle="tab">Application</a></li>
        <li class="active"  id="assigned"><a href="#appointment" data-toggle="tab">Assign Lab Room & Technican</a></li>                                 
        <li class=""><a href="#analysis" data-toggle="tab">Technican Analysis</a></li>
        <ng-container *ngIf="usertypeid==='3'">
        <li class=""><a href="#audit" data-toggle="tab">Audit1</a></li>
        <li class=""><a href="#audit1" data-toggle="tab">Audit2</a></li>
        </ng-container>
    </ul>
</div>  

<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" (click)="show()" ><i class="fa fa-edit"></i>&nbsp;Assignment</button>

Below is my jQuery function as well:

show(){
    console.log("afdghj");
    $( "#assigned").show();            
}

Answer 1

If I understood correctly, you are trying to simulate the click on your <li> when clicking on your button. This is not the appropiate answer if you want to redirect to your #appointment path, because the href="#appointment" is set in your <a> tag and not in your <li> .

Saying that, what I think you should do is to make your button really do what you want, and redirect to the path you want in its action.

Then, your code must be

 function show(){ console.log("afdghj"); window.location.href= '#appointment'; }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-header" id = "liid"> <ul class="nav nav-tabs pull-left" style="cursor: move;"> <li ><a href="#payment" data-toggle="tab">Application</a></li> <li class="active" id="assigned"><a href="#appointment" data-toggle="tab">Assign Lab Room & Technican</a></li> <li class=""><a href="#analysis" data-toggle="tab">Technican Analysis</a></li> <ng-container *ngIf="usertypeid==='3'"> <li class=""><a href="#audit" data-toggle="tab">Audit1</a></li> <li class=""><a href="#audit1" data-toggle="tab">Audit2</a></li> </ng-container> </ul> </div> <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" onclick="show()" ><i class="fa fa-edit"></i>&nbsp;Assignment</button> 

In jQuery show() event means to remove style display: none and hide() does the opposite.