样式切换

最新推荐文章于 2024-03-11 17:35:19 发布

原创最新推荐文章于 2024-03-11 17:35:19 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了两种页面样式切换的方法：一种是使用jQuery实现异步加载页面的导航样式切换；另一种是通过JavaScript进行同步加载的导航样式切换。这两种方法分别适用于不同的场景，能够帮助开发者灵活地控制页面元素的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步加载页面样式切换

// 导航切换
			$(function() {
				$("#nav a").each(
						function(index) {
							$(this).click(
									function() {
										$("#nav a").eq(index).addClass(
												"navClicked").siblings()
												.removeClass("navClicked");
									})
						})

			});

同步加载导航样式切换

<script>

var strUrl=window.location.href;
var arrUrl=strUrl.split("/");
var strPage=arrUrl[arrUrl.length-1];
if(strPage.indexOf("?")>-1){
    var pageName=strPage.split("?");
    strPage=pageName[0];
    /* console.log(pageName[0])
    console.log(pageName[1]) */
}
if (strPage=="home") {
	img1.setAttribute("src", "/images/底部标签页-1首页-on.png");
}else if(strPage=="zhanYouHome"){
	img2.setAttribute("src", "/images/底部标签页-2战友之家-on.png");
}else if(strPage=="signUp"){
	img3.setAttribute("src", "/images/底部标签页-3培训-on.png");
}else if(strPage=="my"){
	img4.setAttribute("src", "/images/底部标签页-4我的-on.png");
}
</script>