tab栏切换-模拟手机随着tab切换视口

案例分析:

我们可以模拟手机的tab切换,学习如何使用js制作网页的tab切换,即点击下面按钮,上面视口显示相应内容,,按钮的图片也随之改变.

那么我们具体怎么实现的呢?

首先整体将HTML结构写出来
然后设置模拟手机设置CSS基本属性
最后设计JavaScript脚本操作页面

首先,我们先整体将HTML结构写出来

1, 整个页面用class="contain"的div标识,contain分为上下结构,上面为view部分,下面是tabbar部分
2, 上面的view有四个表示页面class="viewcontent"的div
3, 下面的tabbar有四个表示按钮class="btn"的div
4, 下面表示按钮的div中又分别有一张图片和内容文字,与上面视口viewcontent相对应

home

car

my

set

home

car

my

set

然后设置模拟手机设置CSS基本属性

然后添加JavaScript脚本

那么JavaScript将怎么设计呢?
1, 获取所有按钮,获取所有视口,他们应该是对应的.添加两个数组,第一个数组保存按钮默认图片地址,第二个数组保存点击按钮图片地址
2, 循环为所有按钮添加点击事件
3, 事件为点击之后,将所有的viewcontent的display设置为none
4, 点击按钮对应位置的视口的display转换为block
5, 所有的按钮图片设置为默认的图片地址
6, 点击按钮的图片地址对应改变