How using onclick event on li to display block (CSS)

Question

How can i do? I hope the block(li) will change color after selection

"onclick" should keep the color changing. But onclick has not changed. (Only use "onclick", not use "a herf")

css

<style>
    #table thead tr {
        background-color: #E95420;
        color: #fff;
    }
.nav-tabs > li > a{
  color:#888888 !important;
  border: medium none;
}
.nav-tabs > li > a:hover{
    background-color: #c3c3c3 !important;
    border: medium none;
    border-radius: 0;
    color:#fff;
}
.nav-tabs > li > a:active{
    background-color: #c3c3c3 !important;
    border: medium none;
    border-radius: 0;
    color:#fff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #fff !important;
  background-color: #E95420 !important;
  border: 1px solid #888888 !important;
}

</style>

View

<div id="EditArea" class="panel-body with-nav-tabs panel-warning">
            <ul class="nav nav-tabs">
                <li role="tab" class="" onclick=1();> <a>1</a></li>
                <li role="tab" class="" onclick=2();> <a>2</a></li>
                <li role="tab" class="" onclick=3();> <a>3</a></li>
                <li role="tab" class="" onclick=4();> <a>4</a></li>
                <li role="tab" class="" onclick=5();> <a>5</a></li>
                <li role="tab" class="" onclick=6();> <a>6</a></li>
            </ul>
</div>

script (function 1~6, Just to adjust the display of other parts)

 function 1() {
         $('#XXXXX').removeClass('hidden d-none');  
         $('#OOOOO').addClass('hidden d-none');
        }

Thank you

post your javascript / jquery function.

Gosi
– Gosi

2020-02-26 06:43:30 +00:00
Commented Feb 26, 2020 at 6:43 — Gosi
– Gosi, Commented Feb 26, 2020 at 6:43
javascript , just to adjust the display of other parts

JunJia Huang
– JunJia Huang

2020-02-26 06:49:12 +00:00
Commented Feb 26, 2020 at 6:49 — JunJia Huang
– JunJia Huang, Commented Feb 26, 2020 at 6:49

Gosi · Accepted Answer · 2020-02-26 07:35:18Z

4

Below is the simple and a short code to change or set the color of item in menu onclick or active menu.

$(document).on('click', '.nav-tabs li', function() {
  $('.nav-tabs li').removeClass('active');
  $(this).addClass('active');
});

.nav-tabs li {
  color: #000000;
}

.nav-tabs li.active {
  color: #ff9933;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li role="tab" class="active"> <a>1</a></li>
  <li role="tab"> <a>2</a></li>
  <li role="tab"> <a>3</a></li>
</ul>

edited Feb 26, 2020 at 7:35

Gosi

2,0133 gold badges26 silver badges39 bronze badges

answered Feb 26, 2020 at 6:57

Deepak Jadon

1187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fazal Qayyum · Accepted Answer · 2020-02-26 06:45:46Z

3

You can try this may i will help you Add this function as JS

function changeColors(element)  
{  
links=document.getElementsByTagName("li") ;  
for (var i = 0 ; i < links.length ; i ++)  
links.item(i).style.color = 'black' ;  
element.style.color='orange' ;  
}

HTML part will be like this.

<ul>  
<li onclick="changeColors(this);">li 1</li>  
<li onclick="changeColors(this);">li 2</li>  
<li onclick="changeColors(this);">li 3</li>  
</ul>

answered Feb 26, 2020 at 6:45

Fazal Qayyum

828 bronze badges

Comments

PRAVEEN KUMAR T · Accepted Answer · 2020-02-26 06:51:50Z

3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
  #table thead tr {
    background-color: #E95420;
    color: #fff;
  }
.nav-tabs > li > a{
  color:#888888 !important;
  border: medium none;
}
.nav-tabs > li > a:hover{
    background-color: #c3c3c3 !important;
    border: medium none;
    border-radius: 0;
    color:#fff;
}
.nav-tabs > li > a:active{
    background-color: #c3c3c3 !important;
    border: medium none;
    border-radius: 0;
    color:#fff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #fff !important;
  background-color: #E95420 !important;
  border: 1px solid #888888 !important;
}

</style>
</head>
<body>

<div id="EditArea" class="panel-body with-nav-tabs panel-warning">
            <ul class="nav nav-tabs">
                <li role="tab" class=""> <a>1</a></li>
                <li role="tab" class=""> <a>2</a></li>
                <li role="tab" class=""> <a>3</a></li>
                <li role="tab" class=""> <a>4</a></li>
                <li role="tab" class=""> <a>5</a></li>
                <li role="tab" class=""> <a>6</a></li>
            </ul>
</div>
<script>
$(function(){
  var li = $('li[role="tab"]');
  li.on('click',function(){
  	li.removeClass('active')
    $(this).addClass('active');
  });
});
</script>
</body>
</html>

answered Feb 26, 2020 at 6:51

PRAVEEN KUMAR T

5034 silver badges9 bronze badges

4 Comments

JunJia Huang Over a year ago

"onclick" needs to be used individually

Gosi Over a year ago

What you mean by individually? You mean different colors for different items?

JunJia Huang Over a year ago

This means i need to use.... function1(){............},function2(){.........},function3(){......}

JunJia Huang Over a year ago

Thanks for answering, I used the following way

Collectives™ on Stack Overflow

How using onclick event on li to display block (CSS)

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related