There are many ways to simulate a windows style tab on the webpage. Here we will introduce a simple method-using htc components.
The advantage of using htc is that it can be freely called and is a bit batch-processed. For example, if you want to use this tab on many webpages, you only need to create an htc, then they are called separately on different web pages without having to make them again. It is easy to use and saves a lot of time.
The example page is as follows. The source file download is provided at the end of the article.
The procedure is as follows:
1. Download mpc. htc
First, go to the Microsoft site to download a component named "mpc. htc", which is the raw material for making the windows tab.
2. Edit the webpage and call the mpc. htc
1. Write the html tag as follows:
<HTML xmlns:mpc>2. Create a style behavior:
<STYLE>MCM: container, MCM: page {behavior: url (mpc. htc );}</STYLE>That is to say, both the run-time and load-time tables of the mpc: container and the run-time tables of the mpc: page call the mpc. htc
3. Call specific content:
<BODY><div><mpc:container ><mpc:page ID="name" TABTITLE="这里的内容会被鼠标提示" TABTEXT="这里是选项卡标签的内容">Here is the specific content of the tab</mpc:page><mpc:page TABTITLE="" TABTEXT=""></mpc:page></mpc:container></div></BODY>
Here, the <mpc: container> label uses the width and height of the style to determine the width and height of the entire tab. Then, in the <mpc: page> ...... </Mpc: page> the content of tabs added between tags. You can use several groups of tabs with the following options: <mpc: page> ...... </Mcm: page> label.
The code on the windows tab sample page is attached to the post.
Code for the windows tab sample page in the appendix:
<HTML xmlns:mpc><HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>Mpc</TITLE><STYLE>MCM: container, MCM: page {behavior: url (mpc. htc );}</STYLE></HEAD><BODY BGCOLOR="#FFFFFF" ONLOAD="oMPC.style.visibility='visible'" text="#000000"><div ><mpc:container ID="oMPC" ><mpc:page ID="tab1" TABTITLE="这是一个表格" TABTEXT="表格 "><table ALIGN="CENTER" STYLE="border:1 solid;font:20pt; width:300; height:150; color:white"><tr><td VALIGN="MIDDLE" ALIGN="CENTER">This is a table</td></tr></table></mpc:page><mpc:page ID="tab2" TABTITLE="这里可以写入文本" TABTEXT="文本文字 "><div >Write text here ......</div></mpc:page><mpc:page ID="tab3" TABTITLE="这是图象" TABTEXT="图象 "></di
