使用 javascript 的活動類

Question

單擊任何導航欄選項頁面刷新后，活動選項卡轉到“全部”選項卡

但我希望它堅持我選擇的選項

誰能告訴我這里出了什么問題

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

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