CSS: a tabbed interface

‘:TARGET’ 虚拟的类型

URL通常都是指向一个网页. 但是当URL 以”#something”结尾时,它会指引你去网页中的特定要素.浏览器一般会尝试确保被指定的要素是显而易见的并且尽量把它显示在页面的最上方.

在”target”选择器内, 你可以添加特定的形式到指定要素中, 使它得到更多的注意.

但是你可以做的更多. 你可以隐藏或显示这些成分基于它们是目标与否. 接下来是一个例子. 它在一个小菜单里显示了四个选项, 并且每个选项都有链接到一些文本.但在一开始并没有显示这些文本. 每个选项都链接着一个有确定ID的组成部分(#item1,#item2…), 并且这些组成部分只有在当它们是当前的URL的目的地时才能看的见.

试着单击菜单上的选项并且注意在浏览器的地址栏就可看到目前的URL.

This is the element that corresponds to item 1. It should not be visible, unless you followed a link that explicitly targeted "#item1".

If you jumped to item 2, then this element should be visible.

This element is visible if you clicked on the third menu item. The element has a URL, that you can use elsewhere as well. You can put it in some other Web page and jump directly to this item.

以下是它的运作. HTML 的源代码和’display’特征是两个重要的组成部分.首先HTML的文档, 它包括一部份网页的链接和与组成部分相应的IDs:

 
<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>
 
<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

这种形式规则首先会把所有在DIV里的Ps隐藏起来, 然后再覆盖P目前应有的任务.

 
div.items p {display: none}
div.items p:target {display: block}

就是这样.继续上述的例子再加上些颜色, 空间, 边界等等, 这样看起来就更象一个菜单了. 你可以通过这页的源码以了解它是如何完成的.

实际上, 我们添加’:not(:target)’去确定只有CSS3的浏览器可以隐藏这些成分. 所以最好的形式就是:

 
div.items p:not(:target) {display: none}
div.items p:target {display: block}

指定界面

当你明白了以上的这些程序, 要摸索和创造一个真正的”标签式’的界面也就不会太难了:这套形式规则在按下不同的按钮的基础上就不止是显示不同的内容, 还可以改变按钮本身的样子.

以下是一个例子.它并不用’display: none’, 而是用’z-index’.假如你想知道它是如何运作的, 只要做一个”view source”…

Tab 1

One might well argue, that...也许有人会产生争议

Tab 2

... 30 lines of CSS is rather a lot, and...CSS 的30 行或许太多了

Tab 3

... that 2 should have been enough, but...这样2就应该足够了

Default

... it works!它就完成了!

致谢

以上文章是基于 Daniel Glazman的最初想法. 详见他在2003年1月9日”blog” 中的解析和他在1月13日的演示.

网页样式表 CSS的提示与窍门

‘:TARGET’ 虚拟的类型

指定界面

致谢

网页样式表
CSS的提示与窍门