Как использовать событие onclick для li для отображения блока (CSS) - PullRequest
Новая
       1

Как использовать событие onclick для li для отображения блока (CSS)

1 голос
/ 26 февраля 2020

Как я могу это сделать? Я надеюсь, что блок (li) изменит цвет после выбора

"onclick" должен сохранить изменение цвета. Но онклик не изменился. (Используйте только «onclick», но не «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>

Просмотр 

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

скрипт (функция 1 ~ 6, Just настроить отображение других частей) 

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

Спасибо

Ответы [ 3 ]

4 голосов
/ 26 февраля 2020

Ниже приведен простой и краткий код для изменения или установки цвета элемента в меню или активном меню. 

$(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>
3 голосов
/ 26 февраля 2020 

<!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>
3 голосов
/ 26 февраля 2020

Вы можете попробовать это, возможно, я помогу вам Добавить эту функцию как 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 часть будет так: 

<ul>  
<li onclick="changeColors(this);">li 1</li>  
<li onclick="changeColors(this);">li 2</li>  
<li onclick="changeColors(this);">li 3</li>  
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...