How to nav tab, one tab to another tab in onclick event..?

See more:

Javascript

CSS

HTML

jQuery

, +

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
function func() {
debugger;
document.getElementById("comdts").setAttribute('aria-expanded', 'false');
document.getElementById("comdts").setAttribute('class', '');
document.getElementById("comloc").setAttribute('aria-expanded', 'true');
document.getElementById("comloc").setAttribute('class', 'active');
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<ul class="nav nav-tabs tabs" style="width: 100%;">
<li class="active tab" style="width: 25%;" id="comdts">
<a class="active" aria-expanded="false" data-toggle="tab" href="#ComapnyDts-12">
<span class="visible-xs">
<i class="fa fa-home"></i>
</span>
<span class="hidden-xs">Company</span>
</a>
</li>
<li class="tab" style="width: 25%;" id="comloc">
<a runat="server" class="active" aria-expanded="true" data-toggle="tab" href="#ComapnyLoc-12">
<span class="visible-xs">
<i class="fa fa-home"></i>
</span>
<span class="hidden-xs">Locations</span>
</a>
</li>
<li class="tab" style="width: 25%;">
<a class="active" aria-expanded="false" data-toggle="tab" href="#ComapnyContPers-12">
<span class="visible-xs">
<i class="fa fa-home"></i>
</span>
<span class="hidden-xs">Contact Person</span>
</a>
</li>
</ul>
<div class="tab-content">
<div id="ComapnyDts-12" class="tab-pane active">
ComapnyDts
<%-- <asp:Button runat="server" ID="btncompdts" Text="next" OnClientClick="func()" />--%>
<button onclick="func()">Next</button>
</div>
<div id="ComapnyLoc-12" class="tab-pane">
ComapnyLoc
</div>
<div id="ComapnyContPers-12" class="tab-pane">
ComapnyContPers
</div>
</div>
</div>
</asp:Content>

What I have tried:

how to nav tab, one tab to another tab in onclick event..
I am trying the above script code but now working...kindly help...

i am using above tab design is bootstrap CSS only..