Struggling with changing the li class (of Home) from 'active' to none (or another class) when clicking on the profile tab, and then changing the li class (of Profile) from none to 'active' when the profile is activated.
Snippet of my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<asp:PlaceHolder runat="server">
<%-- Style Section --%>
<%: Styles.Render("~/bundles/Css") %>
</asp:PlaceHolder>
<script type="text/javascript">
function openHome() {
location.href = "Home.aspx";
}
function openProfile() {
location.href = "Profile.aspx";
}
</script>
<asp:ContentPlaceHolder ID="StyleSection" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<div class="container">
<div class="jumbotron">
<h1>
BANNER</h1>
</div>
</div>
<!-- MENU START -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab" onclick="openHome();">Home</a></li>
<li><a href="#profile" data-toggle="tab" onclick="openProfile();">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
</div>
<div class="tab-pane fade" id="profile">
</div>
</div>
<%-- Script Section --%>
<%: Scripts.Render("~/bundles/jQuery") %>
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ScriptSection" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
If anyone has a solution, please share. I've attempted various solutions found on stackoverflow but haven't been successful. Appreciate any help!