js学习之导航切换

航切换设计到CSS中标签属性设置：隐藏、显示

涉及html5异步传输的特性

更需要知道js多标签时候元素选择的写法

再啰嗦一下：classLIst属性返回元素的类名，可以用方法add()、remove()添加class属性

setAttribute(name,value)设置新属性及其值，或者修改已有属性的值

正文

上导航切换的示意图

js代码：

window.onload=function () { //window.onload:就是等整个页面内容全部加载完毕

//填写js逻辑

//获取ul里li的个数

var tab_ui=document.getElementsByTagName("ul");

var tab_li=tab_ui[0].getElementsByTagName("li")

//获取要显示的div的个数

var content=document.getElementById("content");

var content_div=content.getElementsByTagName("div");

//给li添加鼠标点击事件

for(var i=0;i<tab_li.length;i++){

tab_li[i].index=i; //异步传输，不设置的话，得到的都是i的最大值

tab_li[i].onclick=function () {

//清除之前的样式

for(var j=0;j<tab_li.length;j++){

//没有点击事件，j=0,1,2

tab_li[j].classList.remove("active");

content_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content_div[this.index].classList.remove("hidden");

}

//给li添加鼠标点击事件

var tab_ui=document.getElementsByTagName("ul");

var tab_li1=tab_ui[1].getElementsByTagName("li")

//var tab_li1=document.getElementsById("li")

var content1=document.getElementById("content1");

var content1_div=content1.getElementsByTagName("div");

for(var i=0;i<tab_li1.length;i++){

tab_li1[i].index=i; //重点，为了让i在循环体内

tab_li1[i].onmouseover=function () {

//这里的i永远=3，如果不设置 tab_li[i].index=i

//清除之前的样式

for(var j=0;j<tab_li1.length;j++){

//没有点击事件，j=0,1,2

tab_li1[j].classList.remove("active");

content1_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content1_div[this.index].classList.remove("hidden");

}

</script>

css代码

<style>

.hidden{

display: none;

}

.tabdemo>.active{

background: red;

border-bottom-color:white ;

}

#wrap{

height: 58px;

background-color: #c7eafa;

}

.tabdemo {

width: 100%;

list-style: none;

margin: 0 auto;

background-color: blue;

}

.tabdemo1 {

width: auto;

list-style: none;

margin: 0 auto;

background-color: pink;

float:left;

}

li{

color: rgb(0, 0, 0);

display:inline-block;

}

ul.tabdemo1 li {

color: rgb(224, 9, 9);

display:block;

}

li:hover{

background-color: lavender;

}

一定注意要把a转成行内块元素，

如果转的是块元素那么短竖线会掉下去，

因为块级元素是独占一行的

display:inline-block;

padding: 0 20px;

line-height: 58px;

text-decoration: none;

color: black;

}

</style>

html代码

<!DOCTYPE html>

<html>

<head>

<title>多导航切换</title>

</head>

//js代码、css代码放在这里

<body>

<div>

</ul>

</div>

</div>

</div>

</div>

<div>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

家好

这里是有新媒之声给大家带来的html5教程

话不多说直接看效果图

首先我们先创建一个html

我们再建一个存放视频背景的文件夹video

我们给建好的html写入基本代码

然后我们再把作为背景网站的视频拷贝到video这个文件夹下

我们在给刚刚建好的html写入视频代码

效果如下

并未网页全屏，而且视频重复播放

别急现在我们给视频添加样式，使它成为名副其实的视频背景

我们给视频代码写一个class="index-video"

我们在head头写上css样式

我们现在再来看看效果

现在网页视频是以全屏播放并且你可以在上面写上其它的效果，比如说导航栏之类的，因为现在视频已经成为了我们网页的背景。

现在我们在head加上跳转代码

现在就让我们回顾一下需要用到那些代码和注意的要去

body体里

<body>

</body>

css样式

.index-video {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto;

height: auto;

z-index: -100;

}

</style>

跳转代码

//

<title>炫酷跳转演示站</title>//为网页标题

position 属性规定元素的定位类型。

position语法：

position : static absolute relative

position参数：

static : 　无特殊定位，对象遵循HTML定位规则

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

position说明：

设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

min-width: 最小宽度; min-height: 最小高度;

width: auto;//宽度为自动

height: auto;//高度为自动

z-index: -100;

//当你定义的CSS中有position属性值为absolute、relative或fixed，

用z-index此取值方可生效。

此属性参数值越大，则被层叠在最上面。

完整代码

用场景

如果你的项目需要同时在android与ios上上架，为了避免开发2套代码，我个人认为采用h5处理一些不影响性能的业务逻辑是个不错的选择（当然你也可以采用其他技术，比如reactNative或c等等）

添加h5代码到assets

比如我的app内部包含了部分h5写的帮助说明，我把h5的内容存放在项目对应的assets目录。

原本加载h5问题代码

原本加载h5没有调用setWebViewClient方法，代码如下图：

问题描述

这个时候发现一个问题，启动应用后加载h5正常，但是在点击页面跳转是会自动的打开了系统内置的浏览器，而且这时候系统内置的浏览器根本访问不了我们的apk内部的h5代码，解决这个问题需要为webview设置WebViewClient，并重写重写WebViewClient的shouldOverrideUrlLoading方法返回true，这样新的连接就会在当前WebView中打开。

解决办法

修改后的代码其实就是添加对setWebViewClient调用，并重写shouldOverrideUrlLoading方法，注意要返回true,代码如下

分享是一种美德，牵手是一种生活方式。

最后感谢提供的分享平台，你觉得有用可以收藏方便以后查阅。

在线咨询

上一篇：客流统计：详解统计方式与使用案例
下一篇：CSS3 @font-face

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

js学习之导航切换

用场景

添加h5代码到assets

原本加载h5问题代码

问题描述

解决办法

分享是一种美德，牵手是一种生活方式。

最后感谢提供的分享平台，你觉得有用可以收藏方便以后查阅。

您的项目需求