Блог

Главная - Вопросы по программированию - активный класс с использованием javascript

активный класс с использованием javascript

#javascript #twitter-bootstrap-3

#javascript #twitter-bootstrap-3

Вопрос:

после нажатия на любой из параметров панели навигации страница перезапускается, а активная вкладка переходит на вкладку «Все»

но я хочу, чтобы он придерживался выбранного мной варианта

кто-нибудь может сказать мне, что здесь не так

 <nav class="navbar navbar-default word" id="myDIV">
        <div class="navbar-header">
        <div class="col-md-12">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="home.php">All</a>
                        </li>
                            
                    <?php foreach( $tag_arr AS $key => $tags_name ) { ?>                    
                        
                        <li>
                            <a href="home.php?tags='.$tags_name ?>"><?php echo  ucfirst($tags_name);  ?>
                            </a>
                        </li>

                    <?php } ?>
                    
                </ul>
            </div>
        </div>
    </nav>
    


  
 <script>
    
$( '#myDIV .navbar-nav li' ).on( 'click', function () {
    //$(this).addClass('active');
    $('#myDIV .navbar-nav').find( 'li.active' ).removeClass('active');
    $( this ).addClass( 'active' );
});

</script>

Комментарии:

1. страница обновляется, потому что вы меняете страницу php .. и active возвращается ко всем, потому что она жестко запрограммирована в HTML. Все ваши изменения в JS будут удалены при перезагрузке страницы

2. но страница такая же

3. но вы выполняете действие PHP, следовательно, вы повторно отображаете страницу на стороне сервера

4. что я могу для этого сделать

5. поставьте на своей странице что-то вроде $currentpage , а затем используйте условие, чтобы проверить, на какой странице отображается код

Ответ №1:

Я не знаю, почему вы должны размещать здесь javascript, в то время как ваша страница будет перенаправлена после нажатия на элемент панели навигации.

  1. Вы делаете все вкладки активными только в том случае, если строка запроса отсутствует tags или tags пуста
  2. Сделайте каждый тег активным, если есть строка запроса tags , равная имени тега.

У меня не было возможности протестировать, но я считаю, что вам нужно что-то вроде этого:

 
<?php
$tag = $_GET["tags"];
?>

<nav class="navbar navbar-default word" id="myDIV">
        <div class="navbar-header">
        <div class="col-md-12">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li
                          <?php if (!$tag) { ?>
                          class="active"
                          <?php } ?>
                        >
                            <a href="home.php">All</a>
                        </li>
                            
                    <?php foreach( $tag_arr AS $key => $tags_name ) { ?>                    
                        
                        <li
                          <?php if ($tag === $tags_name) { ?>
                          class="active"
                          <?php } ?>
                        >
                            <a href="home.php?tags='.$tags_name ?>">
                               <?php echo  ucfirst($tags_name);  ?>
                            </a>
                        </li>

                    <?php } ?>
                    
                </ul>
            </div>
        </div>
    </nav>