CSS: Standard semantics for non-intrusive page-check switching

The popularity of the page sign

Since the introduction of the Yahoo! Home page sign (tab, see below), this is an excellent way to become more and more popular, users are gradually accustomed to and like it, because it can be in the original space to add more information available, and just switch, do not need to refresh the entire page, browsing more comfortable. Many websites accept and use, such as Sina.

　　

Tag structure of a page check

So, let's take a look at the code after these pages are signed.

Sina completely does not consider any standard, is the table nesting, we skip to mention. The XHTML form of Yahoo! is this:

　
　

　
　　
• 页签1
　
　　
• 页签2
　
　　...　
　

　

　

　
　

内容1

　
　

内容1

　
　...　

　
...　

Conform to the standard, but without semantics. There is no association between the page check and the corresponding content. In other words, in the absence of CSS display, the user does not know what the page sign corresponds to which piece of content. And for JavaScript implementations, you have to define more IDs or classes as call hooks for the elements, which can easily cause code redundancy. This was improved by using the hash of the connection element (the field after the # number) to correlate with the content, which is the following:

　
　

　
　　
• 页签1
　
　　
• 页签2
　
　　...　
　

　

　

　
　

内容1

　
　

内容1

　
　...　

　
...

In this way, for the machine, it does find the correlation point, and when the user clicks on it, it can also be transferred to the corresponding content block under the action of the hash (the "anchor point" in the traditional parlance). There is progress, but it is not semantic enough.

[1] [2] [3] Next page