点击导航文字,页面刷新后仍然是点击状态

点击导航,页面会全部刷新,但是仍然想保留点击状态,总结了两种解决方法。

第一种方法通过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); } 

猜你喜欢

转载自www.cnblogs.com/zhangjianzhen/p/9493348.html
今日推荐