利用滑动门做的TAB页例子

1. 利用滑动门做的TAB页例子，用到 YUI框架

<textarea cols="90" rows="15" name="code" class="c-sharp">&lt;html&gt;&lt;head&gt;&lt;mce:script type="text/javascript" src="./js/yui/yahoo/yahoo-min.js" mce_src="js/yui/yahoo/yahoo-min.js"&gt;&lt;/mce:script&gt;&lt;mce:script type="text/javascript" src="./js/yui/dom/dom-min.js" mce_src="js/yui/dom/dom-min.js"&gt;&lt;/mce:script&gt;&lt;mce:script type="text/javascript" src="./js/yui/event/event-min.js" mce_src="js/yui/event/event-min.js"&gt;&lt;/mce:script&gt;&lt;link href="reset.css" mce_href="reset.css" rel="stylesheet" type="text/css"/&gt;&lt;mce:script type="text/javascript"&gt;&lt;!--function select(flag,event){if(flag=="short"){var show = YAHOO.util.Dom.getElementsByClassName('longShow', 'div');if(show){YAHOO.util.Dom.removeClass(show,'longShow');YAHOO.util.Dom.addClass(show,'shortShow');}}else if(flag=="long"){var show = YAHOO.util.Dom.getElementsByClassName('shortShow', 'div');if(show){YAHOO.util.Dom.removeClass(show,'shortShow');YAHOO.util.Dom.addClass(show,'longShow');}}var botton = YAHOO.util.Dom.getElementsByClassName('selected', 'li');YAHOO.util.Dom.removeClass(botton,'selected');var ev =event.srcElement ? event.srcElement : event.target;if(ev.tagName=='A'){ev= ev.parentNode;}YAHOO.util.Dom.addClass(ev,'selected');}function getFocus(event){//支持了IE, FIREFOXvar ev = event.srcElement ? event.srcElement : event.target;if(ev.tagName=='A'){ev= ev.parentNode;}YAHOO.util.Dom.addClass(ev,'over');}function lostFocus(event){var ev = event.srcElement ? event.srcElement : event.target;if(ev.tagName=='A'){ev= ev.parentNode;}YAHOO.util.Dom.removeClass(ev,'over');}// --&gt;&lt;/mce:script&gt;&lt;mce:style&gt;&lt;!--.tab {width:450px;height:300px;border:1px;border-style:solid;border-color:#99BBE8;margin:100px;/* 复合属性border:1px solid #99BBE8;*/}.tab .head {height:45px;background-color:#DEECFD;border-bottom:1px solid #99BBE8;padding:0px;}.tab .head .button{height:32px;/*background:url(images/line.gif) repeat-x bottom;*/padding-top:6px;border-bottom:1px solid #99BBE8;}.tab .head .button .native{background-color:#DEECFD;list-style:none;margin-left:10px;margin-top:1px;}.tab .head .button .native .unselected{float:left;background:url(images/tabs-sprite-left.gif) no-repeat;margin-left:2px;background-position:left -50px;}.tab .head .button .native .unselected .link{display:block;line-height:30px;background:url(images/tabs-sprite-right.gif) no-repeat;background-position: right -49px;margin-left:10px;padding-right:20px;color:#15428B;outline: none;star:expression(this.onFocus=this.blur());}.tab .head .button .native .over{float:left;background:url(images/tabs-sprite-left.gif) no-repeat;background-position:left -100px;}.tab .head .button .native .over .link{background:url(images/tabs-sprite-right.gif) no-repeat;background-position: right -99px;}.tab .head .button .native .selected{position:relative;top:1px;background:url(images/tabs-sprite-left.gif) no-repeat;background-position:left 0px;color:#15428B;font-weight:bold;}.tab .head .button .native .selected .link{display:block;background:url(images/tabs-sprite-right.gif) no-repeat;background-position: right 0px;/*padding-bottom:1px;*/cursor:default;}body{font-family:helvetica,tahoma,verdana,sans-serif;font-size:13px;}.tab .longShow {padding:10px;}.tab .longShow #long_text{display:block;}.tab .longShow #short_text{display:none;}.tab .shortShow {padding:10px;}.tab .shortShow #long_text{display:none;}.tab .shortShow #short_text{display:block;}.tab .head .button .native img{float:right;position:absolute;top:12px;right:4px;src:url(images/img/close.gif) no-repeat;}.tab .head .button .native .close{width:14px;position:absolute;top:1px;right:2px;background:url('img/close.gif') no-repeat 3px 4px;}--&gt;&lt;/mce:style&gt;&lt;style mce_bogus="1"&gt;.tab {width:450px;height:300px;border:1px;border-style:solid;border-color:#99BBE8;margin:100px;/* 复合属性border:1px solid #99BBE8;*/}.tab .head {height:45px;background-color:#DEECFD;border-bottom:1px solid #99BBE8;padding:0px;}.tab .head .button{height:32px;/*background:url(images/line.gif) repeat-x bottom;*/padding-top:6px;border-bottom:1px solid #99BBE8;}.tab .head .button .native{background-color:#DEECFD;list-style:none;margin-left:10px;margin-top:1px;}.tab .head .button .native .unselected{float:left;background:url(images/tabs-sprite-left.gif) no-repeat;margin-left:2px;background-position:left -50px;}.tab .head .button .native .unselected .link{display:block;line-height:30px;background:url(images/tabs-sprite-right.gif) no-repeat;background-position: right -49px;margin-left:10px;padding-right:20px;color:#15428B;outline: none;star:expression(this.onFocus=this.blur());}.tab .head .button .native .over{float:left;background:url(images/tabs-sprite-left.gif) no-repeat;background-position:left -100px;}.tab .head .button .native .over .link{background:url(images/tabs-sprite-right.gif) no-repeat;background-position: right -99px;}.tab .head .button .native .selected{position:relative;top:1px;background:url(images/tabs-sprite-left.gif) no-repeat;background-position:left 0px;color:#15428B;font-weight:bold;}.tab .head .button .native .selected .link{display:block;background:url(images/tabs-sprite-right.gif) no-repeat;background-position: right 0px;/*padding-bottom:1px;*/cursor:default;}body{font-family:helvetica,tahoma,verdana,sans-serif;font-size:13px;}.tab .longShow {padding:10px;}.tab .longShow #long_text{display:block;}.tab .longShow #short_text{display:none;}.tab .shortShow {padding:10px;}.tab .shortShow #long_text{display:none;}.tab .shortShow #short_text{display:block;}.tab .head .button .native img{float:right;position:absolute;top:12px;right:4px;src:url(images/img/close.gif) no-repeat;}.tab .head .button .native .close{width:14px;position:absolute;top:1px;right:2px;background:url('img/close.gif') no-repeat 3px 4px;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="tab"&gt;&lt;div class="head"&gt;&lt;div class="button"&gt;&lt;ul class="native"&gt;&lt;li class="unselected selected" onmouseout="lostFocus(event)" onmouseover="getFocus(event)" &gt;&lt;a class="link" href="#" mce_href="#" onclick="select('short',event)"&gt;Short Text&lt;div class="close"&gt; &nbsp;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="unselected" onmouseout="lostFocus(event)" onmouseover="getFocus(event)" &gt;&lt;a class="link" href="#" mce_href="#" onclick="select('long',event)"&gt;Long Textssss&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="shortShow"&gt;&lt;div id="long_text" &gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.&lt;br/&gt;&lt;br/&gt;Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.&lt;/p&gt;&lt;/div&gt;&lt;div id="short_text"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.&lt;br/&gt;&lt;br/&gt;Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</textarea>