BrantleyOng Ответов: 2

Активен при нажатии кнопки <li>

1,у меня есть создать навигационную панель
2,я хочу активировать список, когда я нажимаю на него
3,я не знаю, почему не работает
ПОЖАЛУЙСТА, ПОМОГИТЕ И ПОБЛАГОДАРИТЕ

Что я уже пробовал:

<style>
.li:hover {
      background-color: #dcdfe5;
      cursor: pointer;
  }
  .active, .li:hover {
    background-color: #dcdfe5;
    color: white;
  }
</style>



<div class="collapse navbar-collapse" id="myDIV">
        <ul class="nav navbar-nav navbar-left">
          <li class="List"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>          <li class="List"><a href="{{ route('bicycle.index') }}">Bike</a></li>          <li class="List"><a href="{{ route('sales.index') }}">Sales</a></li>        </ul>
</div>


<script>
  var header = document.getElementById("myDIV");
  var list = header.getElementsByClassName("List");
  for (var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
    });
  }
</script>

Gerry Schmitz

Вы пробовали подключить их "вручную" (а не в петле for)?

BrantleyOng

с TQ... я сделал это

2 Ответов

Рейтинг:
0

Pratishkumar Kushwaha 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.li:hover {
	      background-color: #dcdfe5;
	      cursor: pointer;
	  }
	  .active, .li:hover {
	    background-color: #dcdfe5;
	    color: white;
	  }
	</style>
</head>
<body>
	<div class="collapse navbar-collapse" id="myDIV">
        <ul class="nav navbar-nav navbar-left">
          <li class="List active">
          	<a>Dashboard</a>
          </li>          
          <li class="List">
          	<a>Bike</a>
          </li>          
          <li class="List">
          	<a>Sales</a>
          </li>        
      </ul>
</div>
<script>
  var header = document.getElementById("myDIV");
  var list = header.getElementsByClassName("List");
  for (var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
    });
  }
</script>
</body>
</html>


Этот код вы можете запустить и воспроизвести мне...

Рейтинг:
0

kuwait dalil 

CSS:


ul.nav a { cursor: pointer; }


HTML:


<ul class="nav">
 <li class="active"><a>Link 1</li>
 <li><a>Link 2</li>
 <li><a>Link 3</li>
</ul>


jQ:


$(function() {
      $( 'ul.nav li' ).on( 'click', function() {
            $( this ).parent().find( 'li.active' ).removeClass( 'active' );
            $( this ).addClass( 'active' );
      });
});