PHP教程之纯CSS完成Tab的两种计划
另外要叮嘱各位的是，抵御诱惑，ASP/PHP/JSP/.NET的对比也许会让你无所适从，你也许学了一半PHP，又开始打C#的主意，或者有人说JAVA很强，这个时候的你绝对不能动摇，哪怕你真想学。 Tab在以后的Web使用中长短经常见的，最大的优点在于可以充实的使用无限的空间来展现更多的内容。罕见的的Tab普通都是经由过程Javascript来完成，它的优点是天真和功效壮大。然而在某些情形下，假如仅仅需求一个复杂的内容切换时是可以思索利用纯CSS来完成的。本文次要引见两种纯CSS的完成计划：1. 锚点 + :target;
2. 纯锚点;
这两种各有各长处，也有各自的局限性。
详细的Demo请检查这里
计划一: 锚点 + :target
CSS3中引入了一个新的伪类:target，当用户和页面停止某些交互时会触发，例若有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。 <a href="#dest">Link to Dest</a>
<p id="dest">This is a new paragraph.</p>
计划一即是使用:target伪类来完成Tab切换。完成道理为：在页面加载的时分经由过程CSS埋没Tab绝对应的内容，同时在:target伪类中将Tab内容设置为可见。
HTML布局以下： <dl>
<dt class="tab-a first"><a href="#a">Tab A</a></dt>
<dd id="a" class="content-a">
Content A
</dd>
<dt class="tab-b"><a href="#b">Tab B</a></dt>
<dd id="b" class="content-b">
Content B
</dd>
<dt class="tab-c"><a href="#c">Tab C</a></dt>
<dd id="c" class="content-c">
Content C
</dd>
<dt class="tab-d"><a href="#d">Tab D</a></dt>
<dd id="d" class="content-d">
Content D
</dd>
</dl>
利用该布局的一个优点在于短少CSS时仍然可以明晰的浏览内容。
关头的CSS代码以下
dd{
padding: 5px;
/*埋没Tab的内容*/
display:none;
-moz-border-radius: 5px;
margin-top:20px
}
dd:target{
position: absolute;
/*显示Tab的内容*/
display:block;
}
/*给Tab和响应的内容设置不异的后台色*/
.tab-a,.content-a{
background: #CCFF00;
}
.tab-b,.content-b{
background: #CCFFFF;
}
.tab-c,.content-c{
background: #FFFF00;
}
.tab-d,.content-d{
background: #FFCCFF;
}
利用CSS计划的一个坏处在于不容易辨别哪一个Tab是以后选中的，一个复杂的体例是给响应的Tab和Tab内容设置不异的后台色，如许当Tab内容显示时，可以更明晰的分辨以后Tab。另外，因为是利用了CSS3中的选择符，因而今朝只能在Firefox、Safari、IE8等古代阅读器下利用。
计划二: 纯锚点
计划二的道理很复杂，在大多半阅读器下，当点击锚点链接时，锚点对应的内容会主动跳到可视局限之内。依据该道理，将Tab的一切内容放到一个固定高度的容器中，而且设置容器的overflow为hidden，另外每一个Tab内容的高度需求与容器坚持分歧。在该布局下，当点击锚点链接时对应的内容会主动跳转到可视局限之内容，即容器内。
详细的HTML布局以下： <ul id="tab_nv">
<li class="tab-a"><a href="#a2">Tab A</a></li>
<li class="tab-b"><a href="#b2">Tab B</a></li>
<li class="tab-c"><a href="#c2">Tab C</a></li>
<li class="tab-d"><a href="#d2">Tab D</a></li>
</ul>
<div id="tab_content">
<div id="a2" class="content content-a">
Content A
</div>
<div id="b2" class="content content-b">
Content B
</div>
<div id="c2" class="content content-c">
Content C
</div>
<div id="d2" class="contentcontent-d">
Content D
</div>
</div>
因为和计划一的道理纷歧样，此处的HTML布局也只能利用Tab和内容分别的布局，利用该布局的一个成绩在于当CSS缺掉的情形下没法明晰的浏览内容。
关头的CSS代码以下： /*给Tab Content容器设置高度*/
#tab_content{
height: 190px;
overflow: hidden;
}
/*给每一个Tab Content定高度，需求与容器坚持分歧*/
#tab_content .content{
padding: 5px;
-moz-border-radius: 5px;
height: 190px;
overflow: hidden;
}
与计划逐一样，这里也经由过程给Tab和对应内容设置不异后台色来处理选中辨认成绩。
总结
1. 纯CSS完成的Tab受限良多，好比计划二中需求给每一个Tab Content设置不异的高度。
2. 没法无效的标识以后选中的Tab，本文是经由过程设置不异后台色做辨别，在良多情形下纷歧定合用。
3. 两个计划都存在兼容性成绩，计划一利用了CSS3的选择符，受限于CSS的完成;而计划二听说在Opera下不灵。
4. 计划一中，当点击其他会触发:target的锚点(或产生相似交互)时，Tab Content会埋没。
<P style="TEXT-INDENT: 2em">
刚开始因为习惯于ASP格式的写法，总是在这些方面出现问题，自己还总是找不到问题所在，这就提醒了自己，在写代码的时候一定要认真，不能粗心地老是少个“；”或者字母大小写不分，要不然很可能找半天都找不到错误。 说点我烦的低级错误吧，曾经有次插入mysql的时间 弄了300年结果老报错，其实mysql的时间是有限制的，大概是到203X年具体的记不清啦，囧。 再就是混迹于论坛啦，咱们的phpchina的论坛就很强大，提出的问题一般都是有达人去解答的，以前的帖子也要多看看也能学到不少前辈们的经验。别的不错的论坛例如php100，javaeye也是很不错的。 php是动态网站开发的优秀语言，在学习的时候万万不能冒进。在系统的学习前，我认为不应该只是追求实现某种效果，因为即使你复制他人的代码调试成功，实现了你所期望的效果，你也不了解其中的原理。 当留言板完成的时候，下步可以把做1个单人的blog程序，做为目标， 我要在声明一下：我是个菜鸟！！我对php这门优秀的语言也是知之甚少。但是我要在这里说一下php在网站开发中最常用的几个功能： 我学习了一段时间后，我发现效果并不好（估计是我自身的问题）。因为一个人的精力总是有限的，同时学习这么多，会导致每个的学习时间都得不到保证。 有时候汉字的空格也能导致页面出错，所以在写代码的时候，要输入空格最好用引文模式。 最后祝愿，php会给你带来快乐的同时 你也会给他带来快乐。 因为blog这样的可以让你接触更多要学的知识，可以接触用到类，模板，js ，ajax 为了以后维护的方便最好是代码上都加上注释，“予人方便，自己方便”。此外开发文档什么的最好都弄齐全。我觉得这是程序员必备的素质。虽然会消耗点很多的时间。但是确实是非常有必要的。 再就是混迹于论坛啦，咱们的phpchina的论坛就很强大，提出的问题一般都是有达人去解答的，以前的帖子也要多看看也能学到不少前辈们的经验。别的不错的论坛例如php100，javaeye也是很不错的。 我还是推荐用firefox ，配上firebug 插件调试js能省下不受时间。谷歌的浏览器最好也不少用，因为谷歌的大侠们实在是太天才啦，把一些原来的js代码加了一些特效。 没接触过框架的人，也不用害怕，其实框架就是一种命名规范及插件，学会一个框架其余的框架都很好上手的。 本文当是我的笔记啦，遇到的问题随时填充 使用 jquery 等js框架的时候，要随时注意浏览器的更新情况，不然很容易发生框架不能使用。 不禁又想起那些说php是草根语言的人，为什么认得差距这么大呢。 学习php的目的往往是为了开发动态网站，phper就业的要求也涵盖了很多。我大致总结为：精通php和mysql Apache不是非得用80或者8080端口的，我刚开始安得时候就是80端口老占用，就用了个 81端口，结果照常，就是输localhost的时候，应该输入为 localhost:81 至于模板嘛，各位高人一直以来就是争论不休，我一只小菜鸟就不加入战团啦，咱们新手还是多学点东西的好。
页:
[1]