移动web开发--- tabs栏详解之angular解析

我们经常使用tabs栏切换 在这里我总结了一下tabs栏的切换方式。

1.使用伪类 :target 切换










区块1

区块1内容

区块1内容

区块1内容

区块2

区块2内容

区块2内容

区块2内容

区块3

区块3内容

区块3内容

区块3内容

区块4

区块4内容

区块4内容

区块4内容

区块5

区块5内容

区块5内容

区块5内容

这段代码中,最重要的两句是

.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;display: none;}

.test .bd .panel:target{display: block;}

我们先把所有的带有 class='panel' 都隐藏了 。然后我们点击相关链接就会显示相关的内容。

效果如下:


移动web开发--- tabs栏详解之angular解析_第1张图片
_2017_02_16_19_16_27_883.gif

哎呀妈呀!不写js也可以实现tabs切换 这个太厉害了,是的这个就是使用:target 伪类选着器的。

使用注意事项:

1.点击链接必须是a标签,且给a标签的href="#+内容";

2.对应的内容标签必须设置id 且和 a 标签中的 href 必须相同;

缺点:
这种效果虽然很简单, 很好使用。 但是,有一个缺点,那就是页面第一次打开的时候,不会有内容来显示。所有若果想显示相应的,必须写相应的js,控制他显示第一个。

使用技术: a标签的锚点;

2.使用js来控制










区块1

区块1内容

区块1内容

区块1内容

区块2

区块2内容

区块2内容

区块2内容

区块3

区块3内容

区块3内容

区块3内容

区块4

区块4内容

区块4内容

区块4内容

区块5

区块5内容

区块5内容

区块5内容

这种实现方法比较好理解, 就是一个排他思想,在这里就不多做解释了。

自我思考:(看不懂可以自行忽视)

我以前学习angular.js 里面也要tabs切换,以前只会使用 不知道原理,现在明白了,在这里总结一下。

先总结一下效果:

1.tabs栏 可以实现切换。

2.它的tabs栏切换页面都是写在不同文件里面的,没有写在一个文件下里面。

第一个效果实现原理比较简单。使用上面的第二种方法就可以了。

那么,第二种效果是如何做到了呢?为什么不在同一文件里,页面可以实现内容跳转呢?

想了好久,终于明白了,我是根据一个现象明白的。是什么现象呢?

就是使用anglar.js必须使用服务器的访问方式而不能使用本地的访问方式。这个现象能说明什么么??

然后我根据今天学习ajax的知识我推断出,我们可以通过异步请求得到我们子页面的内容,然后在使用我们的模板引擎把子页面的内容渲染到对应的地方,这样我们就可以跨页面写代码了。

而且也可以解释为什么angular.js不能在本地访问,只能在服务端访问。

你可能感兴趣的:(移动web开发--- tabs栏详解之angular解析)