Add class to sidebar parent menu & submenu on click

up vote
0
down vote

favorite

I want to add class active to sidebar parent & sub menu on click. I've tried this code, but it won't work. Please check my code and suggest me what and where I missed.

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

asked Nov 12 at 9:55

Jon

447

li.with_sub doesn't exist in html
– Mohammad
Nov 12 at 9:56

1

your jQuery code is very confusing. your question as well. You want to add class on who when click on what ?
– Mihai T
Nov 12 at 9:57

1

There is no a.active element in your HTML? You also seem to be missing an event handler to run your code within.
– Rory McCrossan
Nov 12 at 9:57

@Mohammad li.with_sub, Its there
– Jon
Nov 12 at 10:35

1

No, it is .with-sub
– Mohammad
Nov 12 at 10:37

|
show 4 more comments

up vote
0
down vote

favorite

I want to add class active to sidebar parent & sub menu on click. I've tried this code, but it won't work. Please check my code and suggest me what and where I missed.

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

asked Nov 12 at 9:55

Jon

447

li.with_sub doesn't exist in html
– Mohammad
Nov 12 at 9:56

1

your jQuery code is very confusing. your question as well. You want to add class on who when click on what ?
– Mihai T
Nov 12 at 9:57

1

There is no a.active element in your HTML? You also seem to be missing an event handler to run your code within.
– Rory McCrossan
Nov 12 at 9:57

@Mohammad li.with_sub, Its there
– Jon
Nov 12 at 10:35

1

No, it is .with-sub
– Mohammad
Nov 12 at 10:37

|
show 4 more comments

up vote
0
down vote

favorite

I want to add class active to sidebar parent & sub menu on click. I've tried this code, but it won't work. Please check my code and suggest me what and where I missed.

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

asked Nov 12 at 9:55

Jon

447

I want to add class active to sidebar parent & sub menu on click. I've tried this code, but it won't work. Please check my code and suggest me what and where I missed.

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

javascript jquery html css3

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

asked Nov 12 at 9:55

Jon

447

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

asked Nov 12 at 9:55

Jon

447

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

edited Nov 12 at 9:57

Rory McCrossan

240k29205244

asked Nov 12 at 9:55

Jon

447

asked Nov 12 at 9:55

Jon

447

asked Nov 12 at 9:55

Jon

447

li.with_sub doesn't exist in html
– Mohammad
Nov 12 at 9:56

1

your jQuery code is very confusing. your question as well. You want to add class on who when click on what ?
– Mihai T
Nov 12 at 9:57

1

There is no a.active element in your HTML? You also seem to be missing an event handler to run your code within.
– Rory McCrossan
Nov 12 at 9:57

@Mohammad li.with_sub, Its there
– Jon
Nov 12 at 10:35

1

No, it is .with-sub
– Mohammad
Nov 12 at 10:37

|
show 4 more comments

li.with_sub doesn't exist in html
– Mohammad
Nov 12 at 9:56

1

your jQuery code is very confusing. your question as well. You want to add class on who when click on what ?
– Mihai T
Nov 12 at 9:57

1

There is no a.active element in your HTML? You also seem to be missing an event handler to run your code within.
– Rory McCrossan
Nov 12 at 9:57

@Mohammad li.with_sub, Its there
– Jon
Nov 12 at 10:35

1

No, it is .with-sub
– Mohammad
Nov 12 at 10:37

li.with_sub doesn't exist in html
– Mohammad
Nov 12 at 9:56

your jQuery code is very confusing. your question as well. You want to add class on who when click on what ?
– Mihai T
Nov 12 at 9:57

There is no a.active element in your HTML? You also seem to be missing an event handler to run your code within.
– Rory McCrossan
Nov 12 at 9:57

@Mohammad li.with_sub, Its there
– Jon
Nov 12 at 10:35

No, it is .with-sub
– Mohammad
Nov 12 at 10:37

|
show 4 more comments

1 Answer
1

active

oldest

votes

up vote
0
down vote

Check following code, It is working

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

answered Nov 12 at 11:35

eirenaios

10.1k134976

Its working but, i have common sidebar, it should be work after page redirect to other page. It should works on pageload as well
– Jon
Nov 12 at 11:41

2

@Jon lol, then you need server side code there which will store this active class location. It is not possible using html, css, javascript/jquery, You can use session or cookies here but it will be complex and not a good solution
– eirenaios
Nov 12 at 11:42

No, see this link coderthemes.com/minton/new-layout/ui-buttons.html they've do this by using jqery only, but im not able to understand how they do this. check this js file from this theme coderthemes.com/minton/new-layout/assets/js/jquery.app.js,
– Jon
Nov 12 at 11:45

1

@jon the link you have sent is static html website. In this case you have to put sidebar in every static html page and add active class respectively. If you download this or similar kind of theme you will understand
– eirenaios
Nov 12 at 11:47

1

The question you have asked with related tags and your requirement is answered here! Look, The link you have sent is complete theme and it will have many codes that reflects many scenario and functions. Understand you goal - what you want to achieve and possibility of your code and technology you are working with. Learn from scratch and basic things, It will take time but you will understand everything in the end. peace!
– eirenaios
Nov 12 at 11:58

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53259640%2fadd-class-to-sidebar-parent-menu-submenu-on-click%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

Check following code, It is working

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

answered Nov 12 at 11:35

eirenaios

10.1k134976

Its working but, i have common sidebar, it should be work after page redirect to other page. It should works on pageload as well
– Jon
Nov 12 at 11:41

2

@Jon lol, then you need server side code there which will store this active class location. It is not possible using html, css, javascript/jquery, You can use session or cookies here but it will be complex and not a good solution
– eirenaios
Nov 12 at 11:42

No, see this link coderthemes.com/minton/new-layout/ui-buttons.html they've do this by using jqery only, but im not able to understand how they do this. check this js file from this theme coderthemes.com/minton/new-layout/assets/js/jquery.app.js,
– Jon
Nov 12 at 11:45

1

@jon the link you have sent is static html website. In this case you have to put sidebar in every static html page and add active class respectively. If you download this or similar kind of theme you will understand
– eirenaios
Nov 12 at 11:47

1

The question you have asked with related tags and your requirement is answered here! Look, The link you have sent is complete theme and it will have many codes that reflects many scenario and functions. Understand you goal - what you want to achieve and possibility of your code and technology you are working with. Learn from scratch and basic things, It will take time but you will understand everything in the end. peace!
– eirenaios
Nov 12 at 11:58

|
show 1 more comment

up vote
0
down vote

Check following code, It is working

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

answered Nov 12 at 11:35

eirenaios

10.1k134976

Its working but, i have common sidebar, it should be work after page redirect to other page. It should works on pageload as well
– Jon
Nov 12 at 11:41

2

@Jon lol, then you need server side code there which will store this active class location. It is not possible using html, css, javascript/jquery, You can use session or cookies here but it will be complex and not a good solution
– eirenaios
Nov 12 at 11:42

No, see this link coderthemes.com/minton/new-layout/ui-buttons.html they've do this by using jqery only, but im not able to understand how they do this. check this js file from this theme coderthemes.com/minton/new-layout/assets/js/jquery.app.js,
– Jon
Nov 12 at 11:45

1

@jon the link you have sent is static html website. In this case you have to put sidebar in every static html page and add active class respectively. If you download this or similar kind of theme you will understand
– eirenaios
Nov 12 at 11:47

1

The question you have asked with related tags and your requirement is answered here! Look, The link you have sent is complete theme and it will have many codes that reflects many scenario and functions. Understand you goal - what you want to achieve and possibility of your code and technology you are working with. Learn from scratch and basic things, It will take time but you will understand everything in the end. peace!
– eirenaios
Nov 12 at 11:58

|
show 1 more comment

up vote
0
down vote

Check following code, It is working

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

answered Nov 12 at 11:35

eirenaios

10.1k134976

Check following code, It is working

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {

  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");

  $(this).addClass('active');

  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");

  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');

});

#sidebar-menu li a.active {

  color: black;

  font-weight:bold;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slim-sidebar" id="sidebar-menu">

  <label class="sidebar-label">Navigation</label>

  <ul class="nav nav-sidebar">

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>

      </ul>

    </li>

    <li class="sidebar-nav-item with-sub">

      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>

      <ul class="nav sidebar-nav-sub">

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>

        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>

      </ul>

    </li>

  </ul>

</div>

answered Nov 12 at 11:35

eirenaios

10.1k134976

answered Nov 12 at 11:35

eirenaios

10.1k134976

answered Nov 12 at 11:35

eirenaios

10.1k134976

answered Nov 12 at 11:35

eirenaios

10.1k134976

Its working but, i have common sidebar, it should be work after page redirect to other page. It should works on pageload as well
– Jon
Nov 12 at 11:41

2

@Jon lol, then you need server side code there which will store this active class location. It is not possible using html, css, javascript/jquery, You can use session or cookies here but it will be complex and not a good solution
– eirenaios
Nov 12 at 11:42

No, see this link coderthemes.com/minton/new-layout/ui-buttons.html they've do this by using jqery only, but im not able to understand how they do this. check this js file from this theme coderthemes.com/minton/new-layout/assets/js/jquery.app.js,
– Jon
Nov 12 at 11:45

1

@jon the link you have sent is static html website. In this case you have to put sidebar in every static html page and add active class respectively. If you download this or similar kind of theme you will understand
– eirenaios
Nov 12 at 11:47

1

The question you have asked with related tags and your requirement is answered here! Look, The link you have sent is complete theme and it will have many codes that reflects many scenario and functions. Understand you goal - what you want to achieve and possibility of your code and technology you are working with. Learn from scratch and basic things, It will take time but you will understand everything in the end. peace!
– eirenaios
Nov 12 at 11:58

|
show 1 more comment

Its working but, i have common sidebar, it should be work after page redirect to other page. It should works on pageload as well
– Jon
Nov 12 at 11:41

2

@Jon lol, then you need server side code there which will store this active class location. It is not possible using html, css, javascript/jquery, You can use session or cookies here but it will be complex and not a good solution
– eirenaios
Nov 12 at 11:42

No, see this link coderthemes.com/minton/new-layout/ui-buttons.html they've do this by using jqery only, but im not able to understand how they do this. check this js file from this theme coderthemes.com/minton/new-layout/assets/js/jquery.app.js,
– Jon
Nov 12 at 11:45

1

@jon the link you have sent is static html website. In this case you have to put sidebar in every static html page and add active class respectively. If you download this or similar kind of theme you will understand
– eirenaios
Nov 12 at 11:47

1

The question you have asked with related tags and your requirement is answered here! Look, The link you have sent is complete theme and it will have many codes that reflects many scenario and functions. Understand you goal - what you want to achieve and possibility of your code and technology you are working with. Learn from scratch and basic things, It will take time but you will understand everything in the end. peace!
– eirenaios
Nov 12 at 11:58

Its working but, i have common sidebar, it should be work after page redirect to other page. It should works on pageload as well
– Jon
Nov 12 at 11:41

@Jon lol, then you need server side code there which will store this active class location. It is not possible using html, css, javascript/jquery, You can use session or cookies here but it will be complex and not a good solution
– eirenaios
Nov 12 at 11:42

No, see this link coderthemes.com/minton/new-layout/ui-buttons.html they've do this by using jqery only, but im not able to understand how they do this. check this js file from this theme coderthemes.com/minton/new-layout/assets/js/jquery.app.js,
– Jon
Nov 12 at 11:45

@jon the link you have sent is static html website. In this case you have to put sidebar in every static html page and add active class respectively. If you download this or similar kind of theme you will understand
– eirenaios
Nov 12 at 11:47

The question you have asked with related tags and your requirement is answered here! Look, The link you have sent is complete theme and it will have many codes that reflects many scenario and functions. Understand you goal - what you want to achieve and possibility of your code and technology you are working with. Learn from scratch and basic things, It will take time but you will understand everything in the end. peace!
– eirenaios
Nov 12 at 11:58

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky