Jquery中文网 > 脚本编程 > javascript > 正文新浪,163滑动导航菜单代码

新浪,163滑动导航菜单代码

发布时间：2016-11-26 编辑：www.jquerycn.cn

jquery中文网为您提供新浪,163滑动导航菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的新浪,163滑动导航菜单代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml" > <head> <link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen"> <title>新浪,163滑动导航菜单代码</title> <style> * { font-size:14px;} h2{font-size:24px;} .highlight {background-color:#FFFF00;} .note{color:#FF0000; font-weight:bold;} /* Caution! Ensure accessibility in print and other media types... */ @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ .ui-tabs-hide { display: none; } } /* Hide useless elements in print layouts... */ @media print { .ui-tabs-nav { display: none; } } /* Skin */ .ui-tabs-nav, .ui-tabs-panel { font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; font-size: 12px; } .ui-tabs-nav { list-style: none; margin: 0; padding: 0 0 0 4px; } .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " "; } .ui-tabs-nav li { float: left; margin: 0 0 0 1px; /*min-width: 84px; be nice to Opera */ } .ui-tabs-nav a, .ui-tabs-nav a span { display: block; padding: 0 10px; background: url(http://omeweb.com/photo/temp/ui_tab/tab.png) no-repeat; } .ui-tabs-nav a { margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ padding-left: 0; color: #27537a; font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */ outline: 0; /* prevent dotted border in Firefox */ } .ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; color: #000; } .ui-tabs-nav a span { width: 50px; /* IE 6 treats width as min-width */ min-width: 50px; height: 18px; /* IE 6 treats height as min-height */ min-height: 18px; padding-top: 6px; padding-right: 0; } *>.ui-tabs-nav a span { /* hide from IE 6 */ width: auto; height: auto; } .ui-tabs-nav .ui-tabs-selected a span { padding-bottom: 1px; } .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { background-position: 100% -150px; } .ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active { background-position: 100% -100px; } .ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span { background-position: 0 -50px; } .ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span { background-position: 0 0; } .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; } .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; } .ui-tabs-disabled { opacity: .4; filter: alpha(opacity=40); } .ui-tabs-panel { border-top: 1px solid #97a5b0; padding: 1em 8px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ } .ui-tabs-loading em { padding: 0 0 0 20px; background: url(http://omeweb.com/photo/temp/ui_tab/loading.gif) no-repeat 0 50%; } /* Additional IE specific bug fixes... */ * html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ display: inline-block; } *:first-child html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown combinator)... */ display: inline-block; } </style> </head> <body> <h2>Simple Tabs</h2> <h2>使用说明</h2>

结构比较简单，已经封装,<span class="note">本作品为橘子香水原创，其中样式借用了jquery的ui-tab的样式，JS部分getElementsByClassName是来自网络，其他均为自己写的，程序还可以被扩展，也可能有bug，欢迎指正：QQ 61632273 ，MSN omeweb(at)hotmail.com。</span>

使用简单，两行代码 :var s=new UI_TAB();s.init("container-1");//init方法的参数就是tab的外围DIV的ID

兼容IE6，7，8（样式有一点问题）,FF1.5，FF3.0

刷新页面后仍然可以保持被激活的选项卡

要用程序激活指定的tab，只需要：s2.activeIndex(1)；//其中s2是实例名，后面的1是从0开始的序号，这里有一个例子：点这里激活第二个TAB的第二个

<pre style="margin:0; padding:0;"> <div id="container-1"><span class="note"></span> <ul class="ui-tabs-nav"> <li class="<span class="highlight">ui-tabs-selected</span>"><a href="<span class="highlight">#fragment-1</span>"><span><span class="highlight">One</span></span></a></li> <li class=""><a href="#fragment-2"><span>Two</span></a></li> <li class=""><a href="#fragment-3"><span>Three</span></a></li> </ul> <span class="note"></span> <div style="<span class="highlight">display: block;</span>" class="<span class="highlight">ui-tabs-panel ui-tabs-hide</span>" id="<span class="highlight">fragment-1</span>"> <p>First tab</p> </div> <span class="note"></span> <div class="ui-tabs-panel ui-tabs-hide" id="fragment-2"> <p>Second tab</p> </div> <div class="ui-tabs-panel ui-tabs-hide" id="fragment-3"> <p>Third tab</p> </div> </div> </pre>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery弹性滑动导航菜单
 CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
 新浪,163滑动导航菜单代码
 jquery 遮罩层效果实现的导航菜单
 对css滑动门技术的一些总结和归纳
 CSS3单页面垂直固定导航的例子
 导航菜单仿sina,163淡蓝色选项卡菜单
 显示站点名称和主题的导航菜单
 超酷仿FLASH导航菜单效果
 javascript 滑动门式菜单

上一篇：简单滑动菜单代码下一篇：js tab选项卡效果代码

[关闭]

新浪,163滑动导航菜单代码

最近更新

浏览排行