活动 class 使用 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 放在这里，而你的页面将在点击导航栏项目后被重定向。

只有在没有查询字符串 tags 或 tags 为空时才激活所有选项卡
如果查询字符串 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>

活动 class 使用 javascript

active class using javascript

javascript

twitter-bootstrap-3