CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JunJia Huang
JunJia Huang

Reputation: 119

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

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

Upvotes: 1

Views: 470

Answers (3)

Deepak Jadon
Deepak Jadon

Reputation: 118

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>

Upvotes: 4

PRAVEEN KUMAR T
PRAVEEN KUMAR T

Reputation: 493

<!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>

Upvotes: 3

Fazal Qayyum
Fazal Qayyum

Reputation: 82

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>

Upvotes: 3

Related Questions