活动 class 使用 javascript
active class using javascript
点击任何导航栏选项页面刷新后,活动选项卡转到“全部”选项卡
但我希望它坚持我选择的选项
谁能告诉我这里有什么问题
<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>
我不知道为什么你必须把 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>
点击任何导航栏选项页面刷新后,活动选项卡转到“全部”选项卡
但我希望它坚持我选择的选项
谁能告诉我这里有什么问题
<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>
我不知道为什么你必须把 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>