一、判断页面跳转
HTML:
JS:
$(".swt_navigation>li").map(function(index,item){
var url = $(item).find("a").attr('data-href');
var location = window.location.pathname; // window.location.pathname的简介如下图
if(url==location){
$(item).attr('class','active'); // 相当于在其html里面加上class="active"[active的样式由自己定义]
// 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法;
// 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
}else{
$(item).attr('class','');
}
if(location == '/') { // 跳转到首页
$('.swt-grid_sideBar').css({'position':'','height':'auto'});
$('.swt_slideBar_btn').hide(); // 隐藏返回顶部按钮
}
})
二、切换视频后,让所有的视频都暂停播放:防止播放一个视频后,切换到下一个视频时,上一个视频还在自动播放。
对应代码:
var myVideo = document.querySelectorAll('.swt_grid_video video');
$(function () {
$('.text_content ul li').on('click',function () {
myVideo.forEach(function (item,index) {
// 暂停视频
item.pause();
});
})
})
结果:
初始页面:
点击播放第一个视频
切换到第二个视频
回到第一个视频,第一个视频自动停止播放
三、判断是PC端还是移动端
第一种:jQuery
// 判断是PC端还是移动端
function isPc(){
if ($(window).width() >=1024) { // PC端:屏幕尺寸>=1024px
return true;
}else{ // 移动端:屏幕尺寸<1024px
return false;
}
}
第二种:原生js
// 判断是PC端还是移动端
function isPc(){
if (window.screen.width >=1024) { // PC端:屏幕尺寸>=1024px
return true;
}else{ // 移动端:屏幕尺寸<1024px
return false;
}
}