JS实现页面跳转或者刷新后保留点击添加的class样式

JS实现页面跳转或者刷新后保留点击添加的class样式

项目中遇到一个问题,点击进行页面的跳转,但是添加的class并没有成功。只是在当前的页面触发生效,进入到新的页面就会失效。经过不断的查阅,终于找到了一个完美的方法,使用url传参数,然后根据参数判断是否有必要显示class。二话不说,直接上代码。
html代码片段:

<ul class="navUl">
    			 <li class="active"><a href="../">首页</a></li>			
                 <li><a href="../tt/index.shtml">头条</a> </li>	
                 <li> <a href="../zx/index.shtml">资讯</a></li>
    			 <li><a href="../hdkd/index.shtml">活动看点</a></li> 				
                 <li><a href="../wzx/index.shtml">微资讯</a></li>  					
</ul>

JS代码片段:

$(document).ready(function(){  
        $(".navUl li a").each(function(){  
            $this = $(this);  
            if($this[0].href==String(window.location)){ 
                $(".navUl li").removeClass("active");
                $this.parent().addClass("active");  //active表示被选中效果的类名   
            } 
        });  
    }); 

这样就可以完美的解决了,希望可以帮助到大家。

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,我可以设计一个小程序,实现下拉弹出提示框并跳转页面的功能。 首先,在微信开发者工具中创建一个新的小程序,然后在 app.json 文件中配置页面路由,如下所示: ``` { "pages": [ "pages/index/index", "pages/detail/detail" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" } } ``` 接下来,在 index 页面中添加一个下拉刷新组件,并在其下方添加一个按钮,用于触发弹出提示框的事件。代码如下: ``` <view class="container" style="padding-top: 100rpx;"> <scroll-view scroll-y="{{true}}" style="height: 100vh;" bindscrolltoupper="onPullDownRefresh"> <!-- 下拉刷新 --> <view class="refresh-view"> <view class="refresh-icon"></view> <view class="refresh-text">下拉刷新</view> </view> <!-- 列表数据 --> <view class="list-container"> <view class="list-item" wx:for="{{list}}" wx:key="index"> <view class="item-title">{{item.title}}</view> <view class="item-desc">{{item.desc}}</view> </view> </view> </scroll-view> <!-- 弹出提示框 --> <button class="btn" bindtap="showModal">弹出提示框</button> </view> ``` 在 index.js 文件中,需要定义 onPullDownRefresh 函数,用于处理下拉刷新事件。同时,也需要定义 showModal 函数,用于弹出提示框并跳转页面。代码如下: ``` Page({ data: { list: [ {title: '标题1', desc: '描述1'}, {title: '标题2', desc: '描述2'}, {title: '标题3', desc: '描述3'}, {title: '标题4', desc: '描述4'}, {title: '标题5', desc: '描述5'} ] }, onPullDownRefresh: function () { wx.showNavigationBarLoading(); setTimeout(function () { wx.hideNavigationBarLoading(); wx.stopPullDownRefresh(); }, 2000); }, showModal: function () { wx.showModal({ title: '提示', content: '你点击了弹出提示框按钮', success: function (res) { if (res.confirm) { wx.navigateTo({ url: '../detail/detail' }); } } }); } }); ``` 在 detail 页面中,可以显示一张图片和一段文字。代码如下: ``` <view class="container"> <image class="image" src="../../images/banner.jpg"></image> <view class="text">这是详情页</view> </view> ``` 最后,在 app.wxss 文件中,需要定义样式,使得下拉刷新组件和弹出提示框按钮能够居中显示。代码如下: ``` .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .refresh-view { display: flex; justify-content: center; align-items: center; height: 100rpx; } .refresh-icon { width: 32rpx; height: 32rpx; border-radius: 50%; background-color: #007aff; margin-right: 10rpx; } .refresh-text { font-size: 28rpx; color: #007aff; } .btn { margin-top: 30rpx; background-color: #007aff; color: #fff; border-radius: 10rpx; font-size: 32rpx; padding: 20rpx 30rpx; } .list-container { padding: 30rpx; } .list-item { padding: 20rpx; margin-bottom: 20rpx; border: 1rpx solid #ddd; border-radius: 10rpx; } .item-title { font-size: 32rpx; color: #333; margin-bottom: 10rpx; } .item-desc { font-size: 28rpx; color: #999; } .image { width: 100%; height: 400rpx; object-fit: cover; } .text { font-size: 32rpx; color: #333; margin-top: 30rpx; } ``` 这样,我们就完成了一个实现下拉弹出提示框并跳转页面的小程序。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值