点击导航文字,页面刷新后仍然是点击状态
点击导航,页面会全部刷新,但是仍然想保留点击状态,总结了两种解决方法。
第一种方法通过js
1 <div class="nav" style="float: left;"> 2 <div class="nav-top"> 3 <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png" ></div> 4 </div> 5 <ul> 6 <li class="nav-item"> 7 <a href="javascript:;"><i class="iconfont nav-icon icon_1"></i><span>网站配置</span><i class="iconfont nav-more"></i></a> 8 <ul class="left_nav" style="display: block;"> 9 <li><a href="#2" class="left_nav_lia left_nav_a"><span>网站设置</span></a></li> 10 <li><a href="#2"><span>友情链接</span></a></li> 11 <li><a href="#2"><span>分类管理</span></a></li> 12 <li><a href="#2"><span>系统日志</span></a></li> 13 </ul> 14 </li> 15 <li class="nav-item"> 16 <a href="javascript:;"><i class="iconfont nav-icon icon_2"></i><span>文章管理</span><i class="iconfont nav-more"></i></a> 17 <ul class="left_nav"> 18 <li><a href="#2"><span>站内新闻</span></a></li> 19 <li><a href="#2"><span>站内公告</span></a></li> 20 <li><a href="#2"><span>登录日志</span></a></li> 21 </ul> 22 </li> 23 </ul> 24 </div>
1 <script> 2 $(document).ready(function(){ 3 $('.left_nav li a').each(function(){ 4 if(this.href==window.location.href){ 5 $('.left_nav li a').removeClass("left_nav_a"); 6 $(this).addClass('left_nav_a left_nav_lia'); 7 $(this).parents('.left_nav').css('display','block'); 8 //$(this).parents('.nav-item').children("a").addClass('left_nav_a left_nav_lia'); 9 $(this).parents('.nav-item').children(':first').addClass('left_nav_lia'); 10 $(this).parents('.nav-item').find('.nav-more').css('transform','rotate(90deg)'); 11 $(this).parents('.nav-item').find('.ul_li_a').css('border-left','2px solid #34A0CE'); 12 } 13 }); 14 }); 15 </script>
第二种方法,是通过css
在每个页面添加一个mark标签标记一下
1 <mark class="purchase purchase_center" onshow="onshow"></mark>然后同
然后通过css样式增加点击效果
1 mark.purchase ~ header .top_c dl.top1 menu dd:nth-child(3) { background: rgb(200, 0, 0); }