remove active class on the next element
0
I'm working on this selection which adds active class, what I want is to remove the active class next to the selected element. If there's only one option left. ex. I got 5 options, then selected 1,2,3,4 if I select the fifth option the active class of the first option will be remove, then If I select again the 1 it will become active then, option 2 will become inactive.
Hope you help me. thanks.
$('ul li a').click(function() {
$(this).addClass('active');
var len = $('ul .active').length;
var arr = ;
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) {
arr.push(i + 1);
if (len > 4) {
if (arr[arr.length - 1] == 5) {
$('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
}
}
}
});
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>javascript jquery
asked Nov 16 '18 at 9:47
user123user123
9514
add a comment |
0
I'm working on this selection which adds active class, what I want is to remove the active class next to the selected element. If there's only one option left. ex. I got 5 options, then selected 1,2,3,4 if I select the fifth option the active class of the first option will be remove, then If I select again the 1 it will become active then, option 2 will become inactive.
Hope you help me. thanks.
$('ul li a').click(function() {
$(this).addClass('active');
var len = $('ul .active').length;
var arr = ;
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) {
arr.push(i + 1);
if (len > 4) {
if (arr[arr.length - 1] == 5) {
$('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
}
}
}
});
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>javascript jquery
asked Nov 16 '18 at 9:47
user123user123
9514
2
It is working as you expected. What you exactly want?
– Laxminarayan
Nov 16 '18 at 9:51
@Laxminarayan sorry, ill update my question
– user123
Nov 16 '18 at 9:55
Could I advice a simpler logic, just keep an MRU of the clicked items, and just splice. Use the MRU to update your active class.
– Keith
Nov 16 '18 at 10:03
add a comment |
0
0
0
I'm working on this selection which adds active class, what I want is to remove the active class next to the selected element. If there's only one option left. ex. I got 5 options, then selected 1,2,3,4 if I select the fifth option the active class of the first option will be remove, then If I select again the 1 it will become active then, option 2 will become inactive.
Hope you help me. thanks.
$('ul li a').click(function() {
$(this).addClass('active');
var len = $('ul .active').length;
var arr = ;
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) {
arr.push(i + 1);
if (len > 4) {
if (arr[arr.length - 1] == 5) {
$('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
}
}
}
});
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>javascript jquery
asked Nov 16 '18 at 9:47
user123user123
9514
I'm working on this selection which adds active class, what I want is to remove the active class next to the selected element. If there's only one option left. ex. I got 5 options, then selected 1,2,3,4 if I select the fifth option the active class of the first option will be remove, then If I select again the 1 it will become active then, option 2 will become inactive.
Hope you help me. thanks.
$('ul li a').click(function() {
$(this).addClass('active');
var len = $('ul .active').length;
var arr = ;
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) {
arr.push(i + 1);
if (len > 4) {
if (arr[arr.length - 1] == 5) {
$('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
}
}
}
});
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$('ul li a').click(function() {
$(this).addClass('active');
var len = $('ul .active').length;
var arr = ;
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) {
arr.push(i + 1);
if (len > 4) {
if (arr[arr.length - 1] == 5) {
$('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
}
}
}
});
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$('ul li a').click(function() {
$(this).addClass('active');
var len = $('ul .active').length;
var arr = ;
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) {
arr.push(i + 1);
if (len > 4) {
if (arr[arr.length - 1] == 5) {
$('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
}
}
}
});
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>javascript jquery
javascript jquery
asked Nov 16 '18 at 9:47
user123user123
9514
asked Nov 16 '18 at 9:47
user123user123
9514
edited Nov 16 '18 at 9:56
user123
asked Nov 16 '18 at 9:47
user123user123
9514
asked Nov 16 '18 at 9:47
user123user123
9514
asked Nov 16 '18 at 9:47
user123user123
9514
9514
2
It is working as you expected. What you exactly want?
– Laxminarayan
Nov 16 '18 at 9:51
@Laxminarayan sorry, ill update my question
– user123
Nov 16 '18 at 9:55
Could I advice a simpler logic, just keep an MRU of the clicked items, and just splice. Use the MRU to update your active class.
– Keith
Nov 16 '18 at 10:03
add a comment |
2
It is working as you expected. What you exactly want?
– Laxminarayan
Nov 16 '18 at 9:51
@Laxminarayan sorry, ill update my question
– user123
Nov 16 '18 at 9:55
Could I advice a simpler logic, just keep an MRU of the clicked items, and just splice. Use the MRU to update your active class.
– Keith
Nov 16 '18 at 10:03
2
2
It is working as you expected. What you exactly want?
– Laxminarayan
Nov 16 '18 at 9:51
It is working as you expected. What you exactly want?
– Laxminarayan
Nov 16 '18 at 9:51
@Laxminarayan sorry, ill update my question
– user123
Nov 16 '18 at 9:55
@Laxminarayan sorry, ill update my question
– user123
Nov 16 '18 at 9:55
Could I advice a simpler logic, just keep an MRU of the clicked items, and just splice. Use the MRU to update your active class.
– Keith
Nov 16 '18 at 10:03
Could I advice a simpler logic, just keep an MRU of the clicked items, and just splice. Use the MRU to update your active class.
– Keith
Nov 16 '18 at 10:03
add a comment |
2 Answers
2
active
oldest
votes
2
Here it is.
$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
add a comment |
2
You can try something like this, Check if next li exist and add logic
$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
Yes, I've updated, you can easily do it witha:not("active")
– mbharanidharan88
Nov 16 '18 at 10:14
add a 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335212%2fremove-active-class-on-the-next-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Here it is.
$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
add a comment |
2
Here it is.
$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
add a comment |
2
2
2
Here it is.
$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
Here it is.
$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$('ul li a').click(function() {
$(this).addClass('active');
if($(this).parent().next('li').length){
$(this).parent().next().children().removeClass('active');
}else{
$(this).parent().parent().children().first().children().removeClass('active');
}
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
answered Nov 16 '18 at 10:26
OneJeetOneJeet
962311
962311
add a comment |
add a comment |
2
You can try something like this, Check if next li exist and add logic
$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
Yes, I've updated, you can easily do it witha:not("active")
– mbharanidharan88
Nov 16 '18 at 10:14
add a comment |
2
You can try something like this, Check if next li exist and add logic
$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
Yes, I've updated, you can easily do it witha:not("active")
– mbharanidharan88
Nov 16 '18 at 10:14
add a comment |
2
2
2
You can try something like this, Check if next li exist and add logic
$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
You can try something like this, Check if next li exist and add logic
$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$('ul li a:not("active")').click(function() {
$(this).parent().next("li").find("a").removeClass("active");
if ($(this).parent().next("li").length == 0)
{
$('ul li a').eq(0).removeClass("active");
}
$(this).addClass("active");
});ul{
padding: 0;
}
ul li{
float: left;
list-style-type: none;
}
ul li a{
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #DDD;
margin: 5px;
border-radius: 100px;
}
ul li a.active{
background-color: green;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
edited Nov 16 '18 at 10:13
answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
answered Nov 16 '18 at 10:03
mbharanidharan88mbharanidharan88
4,11342455
4,11342455
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
Yes, I've updated, you can easily do it witha:not("active")
– mbharanidharan88
Nov 16 '18 at 10:14
add a comment |
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
Yes, I've updated, you can easily do it witha:not("active")
– mbharanidharan88
Nov 16 '18 at 10:14
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
hi sir, thanks for help your answer is correct, can you exclude clicking on active class. it will only work on inactive elements.
– user123
Nov 16 '18 at 10:09
Yes, I've updated, you can easily do it with
a:not("active")– mbharanidharan88
Nov 16 '18 at 10:14
Yes, I've updated, you can easily do it with
a:not("active")– mbharanidharan88
Nov 16 '18 at 10:14
add a 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.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335212%2fremove-active-class-on-the-next-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
It is working as you expected. What you exactly want?
– Laxminarayan
Nov 16 '18 at 9:51
@Laxminarayan sorry, ill update my question
– user123
Nov 16 '18 at 9:55
Could I advice a simpler logic, just keep an MRU of the clicked items, and just splice. Use the MRU to update your active class.
– Keith
Nov 16 '18 at 10:03