Multi-browser compatible CSS js the tab tab

2011-05-18  来源:本站原创  分类:Web  人气:118 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS tab   Original tab CSSBBS  </title>
<style type="text/css">
*{ padding:0px; margin:0px;}
body{ text-align:center;font-size:12px;}
.page{
 width:600px;
 margin:10px auto;
 text-align:left;
 }

 h2{ margin:10px; background:#eee;}
/*-----------------------   Content Module   */
.tab_mo{
border:1px solid #ccc;
border-top:none;
padding:10px;
}
/*-----------------------   Menu Module   */
.tab{
 border-bottom:1px solid #ccc; /*   Menu bottom border of the module, that is, on the border of the content of the module   */
 list-style:none;
 padding:4px 5px 3px 5px;
 }
.tab li{
display:inline; /* [  Focus  ]  Let li horizontally  .  If not float also horizontally. Look at the effect can be removed   */
 font-size:12px;
 }
.tab li a{
padding:3px 4px; /*   Because there is no fixed height, so to adjust the display with the fill  . */
border:1px solid #ccc;  /*   The border of the menu item   */
color:#888;
border-bottom:none; /*   The bottom of the borderless   */
text-decoration:none;
background:#f7f7f7
}
/*-----------------------   When the mouse through the menu style   */
.tab li a:hover{
background:#fff;
}
/*-----------------------   Select the style of the time   */
.tab li.no a{
background:#fff;
border-bottom:none; /*    Hide the bottom border of the menu item   */
position:relative;  /* [  Focus  ]  Connections inside the menu item using the relative positioning   */
top:1px;            /* [  Focus  ]  Relative to the outer top is 1 pixel  ,  Is just the bottom border of the pixel. So I covered  ul  The bottom of the frame   */
color:#000000;
font-weight:bold
}
/*-----------------------   Module called Color Style   */
.sy1,.sy1 li a{ border-color:#6699CC;}
.sy1 li a{ background:#DBF5FD}
.sy2,.sy2 li a{ border-color:#FF6600;}
.sy2 li a{ background:#FFCC00}

</style>
<script type="text/javascript">
function tab(a,b,c)
{
for(i=1;i<=b;i++){
if(c==i)
{
//   Determine the selection module
document.getElementById(a+"_mo_"+i).style.display = "block";  //   Show module content
document.getElementById(a+"_to_"+i).className = "no";   //   Change the menu for the selected style
}
else{
//   Module not selected
document.getElementById(a+"_mo_"+i).style.display = "none"; //   Hide the module is not selected
document.getElementById(a+"_to_"+i).className = "q";  //   Empty menu styles have no choice
}
}
}
</script>
</head>

<body>
<div>
<ul>
<li><a href="#">  Latest issue  </a></li>
<li><a href="#">  Top News  </a></li>
<li><a href="#">  Latest Reply  </a></li>
<li><a href="#">CSS  Forum </a></li>
</ul>
<div>
<div>
  Latest issue latest issue latest issue latest issue latest issue latest issue
</div>
<div>
  Hot News Hot News Hot News Hot News Hot News Hot News
</div>
<div>
 New Reply New Reply New Reply New Reply New Reply New Reply New Reply
</div>
<div>
<a href="css/'>http://www.cssbbs.com">CSS  Forum </a>CSS  Forum CSS Forum  CSS  Forum CSS Forum  CSS  Forum CSS Forum
</div>
</div>
<h2>  The second  </h2>

<ul>
<li><a href="#">  Latest issue  </a></li>
<li><a href="#">  Top News  </a></li>
<li><a href="#">  Latest Reply  </a></li>
<li><a href="#">CSS  Forum </a></li>
</ul>
<div>
<div>
  Latest issue latest issue latest issue latest issue latest issue latest issue
</div>
<div>
  Hot News Hot News Hot News Hot News Hot News Hot News
</div>
<div>
 New Reply New Reply New Reply New Reply New Reply New Reply New Reply
</div>
<div>
<a href="css/'>http://www.cssbbs.com">CSS  Forum </a>CSS  Forum CSS Forum  CSS  Forum CSS Forum  CSS  Forum CSS Forum
</div>
</div>
<h2>  The third  </h2>

<ul>
<li><a href="#">  Latest issue  </a></li>
<li><a href="#">  Top News  </a></li>
<li><a href="#">  Latest Reply  </a></li>
<li><a href="#">CSS  Forum </a></li>
</ul>
<div>
<div>
  Latest issue latest issue latest issue latest issue latest issue latest issue
</div>
<div>
  Hot News Hot News Hot News Hot News Hot News Hot News
</div>
<div>
 New Reply New Reply New Reply New Reply New Reply New Reply New Reply
</div>
<div>
<a href="css/'>http://www.cssbbs.com">CSS  Forum </a>CSS  Forum CSS Forum  CSS  Forum CSS Forum  CSS  Forum CSS Forum
</div>
</div>
<h2>  The fourth  </h2>

<ul>
<li><a href="#">  Latest issue  </a></li>
<li><a href="#">  Top News  </a></li>
<li><a href="#">  Latest Reply  </a></li>
<li><a href="#">CSS  Forum </a></li>
</ul>
<div>
<div>
  Latest issue latest issue latest issue latest issue latest issue latest issue
</div>
<div>
  Hot News Hot News Hot News Hot News Hot News Hot News
</div>
<div>
 New Reply New Reply New Reply New Reply New Reply New Reply New Reply
</div>
<div>
<a href="css/'>http://www.cssbbs.com">CSS  Forum </a>CSS  Forum CSS Forum  CSS  Forum CSS Forum  CSS  Forum CSS Forum
</div>
</div>
</div>

<p>
  View this code tutorial  :
<a href="css/'>http://www.cssbbs.com">CSS  Forum </a>   All rights reserved
</p>
</body>
</html>

Reprinted from: http://jijiadong831207.blog.163.com/blog/static/356780912009113105417683/

相关文章
  • To prevent the browser cache css, js static files [transfer] 2011-01-11

    Under what circumstances, to prohibit the static file cache: 1, is often possible to change the js, css. Such as a html file, test.html in the 1.0 version. It may be so <script src="common.js"> </ script> The revised version v1.1: &l

  • Multi-browser compatible CSS js the tab tab 2011-05-18

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • Preparation of cross-browser compatible CSS code is the golden rule (change) 2010-06-10

    As a Web designer, your website in various browsers have exactly the same performance target of many people, but it is never really a goal that many people think, the perfect cross-browser compatibility and unnecessary , say enough, but in many cases

  • CSS+Js遮罩效果的TAB及焦点图片切换(推荐) 2014-02-19

    CSS+Js图片切换技术,类似的已有不少了,这一个使用了遮罩过渡的效果,同样应用到了TAB选项卡上,本页面仅是为了演示,大家用时候把它拆分开来,这个效果也对学习图片效果制作很有帮助. Js遮罩效果的TAB及图片切换 神秘花园 脚本之家演示 人间仙境 WEB前端 VB封装一个文本文件读写类含示例 Csdn网站右下角的滑出弹出提示(带关闭功能) VC++做的精美仿XP开始菜单 VB+Access学生综合档案管理系统 Delphi随机抽取幸运观众Access数据库版 多线程的VC++高速文件搜索代码

  • div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容 2014-07-17

    div+css+js模拟tab,这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒222.. 这里是内容撒.222.. 这里是内容撒.222.. 这里是内

  • 纯css+js写的一个简单的tab标签页带样式 2014-10-05

    最近经常要用tab标签页,于是就写了一个简单的tab标签页,纯css+js写的,带样式.大家可以参考下 最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图: 接下来看下代码怎么写的吧: 一.sp文件easytab.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String p

  • 基于jquery的9行js轻松实现tab控件示例 2013-11-12

    tab控件的实现方法有很多,在本文为大家详细介绍下如何通过9行js实现简单的tab控件,感兴趣的朋友不要错过 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <scri

  • js(JavaScript)实现TAB标签切换效果的简单实例 2014-12-07

    本篇文章主要是对js(JavaScript)实现TAB标签切换效果的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991

  • CSS + JS tabbed navigation menu 2010-04-29

    CSS + JS tabbed navigation menu for the first time use of imitation menu.jsp <% @ Page language = "java" pageEncoding = "utf-8"%> <HTML> <HEAD> <TITLE> CSS + JS tabbed navigation menu </ TITLE> <META NA

  • [Transfer] DIV + CSS + JS code download images seamlessly scroll 2011-01-10

    Seamless scrolling DIV pictures, DIV seamless picture scroll, DIV seamless rolling under the picture, DIV picture scroll left seamless, DIV seamless picture scroll from right First look at a few of the properties of the object: innerHTML: set or get

  • [Change] CSS3 and HTML5 major browser compatible Cheat 2010-04-06

    CSS3 and HTML5 major browser compatible Cheat http://tools.yesky.com/101/11197101.shtml Currently, the best support for CSS3 and HTML5 is the Safari, Chrome second, Firefox 3.6 and Opera 10.5 matched, IE family of the worst. Given this situation, if

  • [Change] the preparation of cross-browser compatible CSS code is the golden rule 2010-06-09

    As a Web designer, your website in various browsers have exactly the same performance target of many people, but it is never really a goal that many people think, the perfect cross-browser compatible and unnecessary , say enough, but in many cases, a

  • Preparation of cross-browser compatible CSS code is the golden rule 2010-06-10

    As a Web designer, your site in a variety of browsing devices have exactly the same performance Henduo people's Mubiao, but this is a realization of the goal can never be Zhenzheng, many people think, the perfect cross-browser compatibility Bingbubiy

  • Preparation of cross-browser compatible CSS code is the golden rule, too tough a 2010-09-17

    Understand the CSS box model If you want to achieve without a lot of Kit Kat prostitution and technology cross-browser compatible CSS code, and a thorough understanding of the CSS box model is the most important thing, CSS box model is not difficult,

  • A simple javascript tab tab 2011-01-13

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"> <head> <meta ht

  • Div+Css(+Js)菜单代码及制作工具 2014-11-17

    效果直逼flash的Div+Css+Js菜单 css菜单 G1 good morning G2 good evening M1 my name is fireyy M2 mm mm i love u G1 good morning G2 good evening M1 my name is fireyy M2 mm mm i love u [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 另转:5款纯div+css制作的弹出菜单(标准且无js) 一.最基本的:二级dropdown弹出菜

  • Js css achieved with some of the methods of operation, set to facilitate the need to control the css js friend 2010-06-01

    Quoted from: http://myext.cn/Article/1169.html Js css achieved with some of the methods of operation, set to facilitate the need to control the css js friend / / Get the real elements, the final value of the function of CSS style attributes function

  • CSS + JS achieve a DIV layer expand / collapse effect 2010-07-22

    <html> <head> <title> CSS + JS achieve a DIV layer expand / collapse effect 丨 丨 core clear web effects CsrCode.Cn </ title> <style> * (Margin: 0; padding: 0;) body (text-align: center; font: 75% Verdana, Arial, Helvetica, san

  • div + css + js menu sample shutter 2010-07-30

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" " target="_blank">http://www.w

  • [Transfer] the preparation of cross-browser compatible CSS code is the golden rule 2010-12-02

    Write cross-browser compatible CSS code is the golden rule See: http://www.oschina.net/bbs/thread/9037