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>

Thank you