css彻底研究之tabview实现.docxVIP

网上随处可见的各式各样的tab菜单，此外，还有很多网站都使用了与他们类似的网页元素，这些网站上的tab面板和菜单实际分为两种： 第一种，是切换各个tab页中的内容时并不刷新浏览器窗口，说明各个页中的内容实际已经装载到页面上了，只是被隐藏起来，只有被选中的tab页内容显示出来。例如的页面属于这种类型。 HYPERLINK / / 第二种，是切换各个tab页面中的内容是，会刷新浏览器窗口，实际上就是更换了一个新的html页面。例如 HYPERLINK 要实现第一种的效果必须通过javascript的配合，仅通过css来实现是比较困难的，而且实现的功能十分有限。 实际上，也有一些网站使用ajax技术，可以实现切换到某一页之后，在动态地从服务器上获取数据，局部刷新tab页内的区域，而整个页面的其他部分则不需要重新从服务器获取数据。 我们将前一种方式（浏览器无刷新）制作的效果称为“tab面板”，因为他是一个页面中的一个区域；而后一种方式（浏览器刷新）制作的效果称为“tab菜单”，因为它实际上就是多个页面之间的导航菜单。 下面先介绍tab菜单： 效果图如下： 共包含4个文件： HYPERLINK http://home.html、dev.html、design.html、tab.css home.html、dev.html、design.html、tab.css Home.htm： html head titleTab菜单/title link href=tab.css type=text/css rel=stylesheet /head body id=home ul id=tabnav li class=homea href=home.htmHome/a/li li class=deva href=dev.htmWeb Dev/a/li li class=designa href=design.htmWeb Design/a/li /ul div id=content ul id=list li1. There are some good news./li li2. Not only good news./li li3. The text here are examples./li li4. Not only good news./li li5. The text here are examples/li /ul /div /body /html dev.htm： html head titleTab菜单/title link href=tab.css type=text/css rel=stylesheet /head body id=dev ul id=tabnav li class=homea href=home.htmHome/a/li li class=deva href=dev.htmWeb Dev/a/li li class=designa href=design.htmWeb Design/a/li /ul div id=content ul id=list li1. There are some good news./li li2. Not only good news./li /ul /div /body /html design.htm： html head titleTab菜单/title link href=tab.css type=text/css rel=stylesheet /head body id=design ul id=tabnav li class=homea href=home.htmHome/a/li li class=deva href=dev.htmWeb Dev/a/li li class=designa href=design.htmWeb Design/a/li /ul div id=content ul id=list li1. There some good news./li li2. Not only good news./li li3. The text here are examples/li li4. Not only good news./li /ul /div /body /html tab.css内容为： body{ margin:10px; } #content{ /* 具体内容 */ border-left:1px solid #11a3ff; /* 左边框 */ border-right:1px solid #11a3ff; /* 右边框 */