I had a previous code like this:
Basically I added the active status to the li docker logs and open the sub-menu of Docker.
html
<li id="dockerMenu">
<a data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-main.webapp.pages">
<img src="../resources/img/icons/docker-icon.png" alt="" class="menuIcon">
<span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
</a>
<div class="collapse" id="docker-pages">
<ul class="nav flex-column sub-menu" data-simplebar>
<security:authorize access="hasAuthority('Administrator')">
<li class="nav-item" id="docker-status">
<a href="/docker-status">
<img src="../resources/img/icons/status.png" alt="">
<span class="menu-title">Container Status</span>
</a>
</li>
...
<ul>
<div>
</li>
var url = window.location.pathname + window.location.search;
if(url === "/docker-logs") {
$('#docker-logs').addClass('active');
$('#dockerMenu a').click();
}
I wanted to do the same on Angular but I don't know how
ngOnInit() {
this.toggleMenus();
}
toggleMenus() {
let url = window.location.pathname;
console.log(url);
switch(url) {
case "/docker-logs":
//how do I activate this?
}
Related
I have been staring at this code for far too long, unfortunately I do not see the problem.
I am trying to get the active menu entry highlighted when the relevant div gets scrolled into view. But nothing is happening and no errors are being thrown in the console.
My menu html:
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
An example div:
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>
My jquery/js:
if ($('.LeftAnchorNav').length > 0) {
// prepare the variables
var lastID;
var anchorMenu = $(".LeftAnchorNavMenu");
var anchorMenuHeight = anchorMenu.outerHeight() + 100;
var anchorMenuItems = anchorMenu.find(".leftlink");
var anchorMenuItemsTarget = anchorMenuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// bind everything to the scrolling
$(window).scroll(function () {
// get anchornav container scroll position and add buffer
var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;
// get ID of the current scroll item
var currentItem = anchorMenuItemsTarget.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// get the ID of the current element
currentItem = currentItem[currentItem.length - 1];
var id = currentItem && currentItem.length ? currentItem[0].id : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("highlightleftnavactive")
anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
}
});
}
It's quite fiddly to do the arithmetic for scrolling so this snippet uses IntersectionObserver instead. This has the added benefit of less processing overhead as it just gets informed when the elements come in or go out of view, not every time the user scrolls a bit.
It sets up the observer to observe when any of the relevant elements come into or go out of the viewport. When alerted to that it adds or removes the highlighting class to the related navbar link.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
.LeftAnchorNav {
position: fixed;
z-index:1;
}
.tall {
width: 100vw;
height: 100vh;
background-image: linear-gradient(cyan, magenta, yellow, black);
}
.highlightleftnavactive {
background-color: yellow;
}
</style>
</head>
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<div class="tall"></div>
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">
An example block coming into and going out of view it belongs to the About us link in the navbar</div>
</div>
<div class="tall"></div>
<script>
let callback = (entries) => {
entries.forEach(entry => {
let id = entry.target.firstChild.id;
let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']");
if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');}
else { leftLink.classList.remove('highlightleftnavactive');}
});
};
const observer = new IntersectionObserver(callback);
const anchorBlocks = document.querySelectorAll('.anchorblock');
anchorBlocks.forEach( (anchorBlock) => {
observer.observe(anchorBlock);
});
</script>
I'm struggling with a very simple problem that I can't solve.
I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:
First list:
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link"></a>
</li>
<li>
<a id="iOS" class="link external" target="_blank" href="ios_link"></a>
</li>
<li>
<a id="windows" class="link external" target="_blank" href="windows_link"></a>
</li>
</ul>
Second list:
<ul>
<li>
<a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
<div class="item-media">
<i class="f7-icons">logo_facebook</i>
</div>
<div class="item-inner">
<div class="item-title">Facebook</div>
</div>
</a>
</li>
<li>
<a href=instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
<div class="item-media">
<i class="f7-icons">logo_instagram</i>
</div>
<div class="item-inner">
<div class="item-title">Instagram</div>
</div>
</a>
</li>
</ul>
So, I need to take the href attribute on click event. I wrote this:
Dom7('.link.external').on('click', (event) => {
// First try
href = event.target.getAttribute('href')
console.log(href)
// Second trye
console.log(event.srcElement.href)
// Third try
var href = Dom7('a.link.external').attr('href');
var id = Dom7('a.link.external').attr('id');
console.log(href)
console.log(id)
})
I've tried three different solutions, but none of them work.
The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.
The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.
Can you help me to solve this problem?
Solution 1
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
</li>
</ul>
<script>
function linkClicked(object) {
consile.log(object.getAttribute("href"));
return false;
}
</script>
Solution 2
var elements = document.getElementsByClassName('link');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', linkClicked, false);
}
function linkClicked() {
console.log(this.getAttribute("href"));
};
if you can use jquery, use this working code :
$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);
});
jsfiddle
i have a trouble at the moment will rendering html tag inside state. When i add 'div dangerouslySetInnerHTML={{__html: this.state.actions}} it seems can't because i will render in li tag for menu
this.state = {
sideBar : '<li>[object Object]</li>'
}
// when i render
render(){
return(
{ this.state.sideBar}
) ==> // '<li>[object Object]</li>'
// what should happen is to create a new list
[object Object]
You can get it working without using dangerouslySetInnerHTML. Here's an example of using <ul> and an array of <li> tags that you can render directly in React.
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: ["list 1", "list 2", "list 3"]
};
}
render() {
return (
<div>
<ul>
{this.state.list.map((obj, index) => <li key={index}>{obj}</li> )}
</ul>
</div>
);
}
}
like this code
import React, { Component } from 'react'
import { Route, NavLink, Link } from 'react-router-dom'
import ReactTimeout from 'react-timeout'
class Menu extends Component {
constructor() {
super();
this.state = {
menuBar: [],
sideBar: []
}
}
async componentDidMount() {
const res = await fetch('http://localhost:3001/api/menu/' + 18)
const something = await res.json()
this.setState({ menuBar: something })
console.log(this.state.menuBar)
let menuBar = this.state.menuBar
let html = "";
let link_menu = []
for (var i = 0; i < menuBar.length; i++) {
if (menuBar.menu_url == 'dashboard' || menuBar.menu_flag_link === 1) {
var span_selected = ''
} else {
var span_selected = 'arrow'
}
if (menuBar.menu_flag_link == 0) {
var title_menu = menuBar[i].menu_title
link_menu =
<NavLink
to='javascript:;'
exact>title_menu</NavLink>
} else {
var title_menu = menuBar[i].menu_title
link_menu = <NavLink
to="/"
exact>title_menu</NavLink>
}
html += '<li>' + link_menu
if (menuBar[i].child.length > 0) {
html += "<ul class='sub-menu'>"
for (var j = 0; j < menuBar[i].child.length; j++) {
if (menuBar[j].child.menu_flag_link == 0) {
var link_menu2 = <NavLink
to='javascript:;'
exact>menuBar.child.menu_title</NavLink>
} else {
var link_menu2 =
<NavLink
to="/"
exact>menuBar.child.menu_title</NavLink>
}
html += "<li>, ${link_menu2}"
if (menuBar[i].child[j].length > 0) {
html += "<ul class='sub-menu'>"
for (var kjh = 0; kjh < menuBar[i].child[j].length; kjh++) {
var link_menu3 =
<NavLink
to="/"
exact>menuBar.child.menu_title</NavLink>
html += '<li> ${link_menu3} </li>'
}
html += '</ul>'
}
html += '</li>'
}
html += '</ul>'
}
html += '</li>'
}
this.setState({ sideBar: html })
}
render() {
let menuBar = this.state.menuBar
let sideBar = this.state.sideBar
// console.log(sideBar)
return (
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-sidebar-menu-light" data-keep-expanded="true" data-auto-scroll="true" data-slide-speed="200">
<li class="sidebar-toggler-wrapper">
<div class="sidebar-toggler">
</div>
</li>
<li class="sidebar-search-wrapper">
<form class="sidebar-search " action="extra_search.html" method="POST">
<a href="javascript:;" class="remove">
<i class="icon-close"></i>
</a>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." />
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>
</li>
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<li>
<NavLink
to="/"
exact>Home</NavLink>
</li>
<li class="active">
<NavLink to={{
pathname: '/blog',
hash: '#submit',
search: '?quick-submit=true'
}}
>Blog</NavLink>
</li>
<li>
<NavLink to={{
pathname: '/Table'
}}>Table</NavLink>
</li>
<li>
<NavLink to={{
pathname: '/BCC'
}}>BCC</NavLink>
</li>
</ul>
</li>
{this.state.sideBar}
<li>
<a href="javascript:;">
<i class="icon-folder"></i>
<span class="title">Multi Level Menu</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;">
<i class="icon-settings"></i> Item 1 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;">
<i class="icon-user"></i>
Sample Link 1 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<i class="icon-power"></i> Sample Link 1
</li>
<li>
<i class="icon-paper-plane"></i> Sample Link 1
</li>
<li>
<i class="icon-star"></i> Sample Link 1
</li>
</ul>
</li>
<li>
<i class="icon-camera"></i> Sample Link 1
</li>
<li>
<i class="icon-link"></i> Sample Link 2
</li>
<li>
<i class="icon-pointer"></i> Sample Link 3
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-globe"></i> Item 2 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<i class="icon-tag"></i> Sample Link 1
</li>
<li>
<i class="icon-pencil"></i> Sample Link 1
</li>
<li>
<i class="icon-graph"></i> Sample Link 1
</li>
</ul>
</li>
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Item 3 </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
)
}
}
export default ReactTimeout(Menu)
I'm just learning angularjs and working on my first "real" project. I've spent a couple hours searching online for an answer, but can't seem to find anything relevant in simple enough terms for me to understand.
I have a directive that just loads a navigation header:
app.directive('navDirective', function() {
return {
templateUrl: '../../views/nav.html'
};
});
And in my index.html file I have simply
<nav-directive> </nav-directive>
Initially I was working with Auth0 and got that working, and then added an ng-show to the nav items so that only login shows when there's no user, and all the others appear when there is a user.
Now, I am trying to get local authentication working, instead of using Auth0. It works, but I have to hit the brower's reload button after logging in before I see the navigation template update.
I think I've figured out that when using Auth0, I actually leave my website to go to Auth0, and then the callback causes my page to reload - so I see my nav items.
When I login locally using passport's local strategy, how can I force the navigation template to reload? Or become aware there is now a user, so change the ng-show's on the list items in the template?
Reading tonight, it seems like I can use $watch to do this, but I can't find a "$watch-for-dummies" page and am confused as to how that works exactly, what I would put in the link function and how I would trigger it.
My nav.html template is
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" ng-controller="NavCtrl">
<a class="navbar-brand" href="#" ng-show="currentUser">User: {{ currentUser.username }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbarCollapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav ">
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="home">Home </a>
</li>
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="view2">View 2</a>
</li>
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="view3">View 3</a>
</li>
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="reports">Reports</a>
</li>
<li class="nav-item dropdown" ng-show="currentUser">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item nav-item-colapse" ui-sref="sub1">Sub Task1</a>
<a class="dropdown-item nav-item-colapse" ui-sref="sub2">Sub Task2</a>
<a class="dropdown-item nav-item-colapse" href="http://www.google.com">Do Something Else</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link active" ui-sref="login" ng-show="!currentUser">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="logout()" ng-show="currentUser">Logout</a>
</li>
</ul>
</div>
</nav>
and navCtrl is:
app.controller("navCtrl", function($scope, mainSrvc) {
mainSrvc.getUser().then(function(user){
$scope.user = (user.data);
console.log('nav ctrl ran') //except it doesn't when logging in locally
console.log(($scope.user));
});
});
And this point I'm not sure if I'm going about this completely wrong or what.
Any suggestions or pointers?
You can use ng-if="vm.isLoggedIn()" to know if a user is present or not.
<nav ng-controller="LoginController as vm" ng-if="vm.isLoggedIn()"
class="navbar navbar-inverse navbar-static-top" ng-init="vm.init()">
In your login controller return wheather a user is logged in or not after authentication
function LoginController($http, $location, $window, AuthFactory, jwtHelper) {
var vm = this;
vm.isLoggedIn = function () {
if (AuthFactory.isLoggedIn) {
return true;
}
else {
return false;
}
};
vm.login = function () {
if (vm.username && vm.password) {
var user = {
username: vm.username,
password: vm.password
};
$http.post('/api/users/login', user).then(function (response) {
if (response.data.success) {
$window.sessionStorage.token = response.data.token;
AuthFactory.isLoggedIn = true;
var token =$window.sessionStorage.token;
var decodedToken = jwtHelper.decodeToken(token);
vm.loggedInUser = decodedToken.username;
}
}).catch(function (error) {
console.log(error);
})
}
}
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});