mootools 菜单切换

-->

• first tab
• second tab
• third tab

I'm the content for the first panel.

I'm the content for the second panel.

I'm the content for the second panel.

I'm the content for the third panel.

I'm the content for the third panel.

I'm the content for the third panel.

Code
       <style>
            #tabBoxExample {
    WIDTH: 543px
}
#tabBoxExample .tabSet {
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 6px; WIDTH: auto; PADDING-RIGHT: 0px; BACKGROUND: url(http://www.clientcide.com/wp-content/themes/clientsidev2/art/tab-bkg.gif) repeat-x left bottom; HEIGHT: 26px; PADDING-TOP: 0px
}
#tabBoxExample .tabSet LI:before {
    CONTENT: "" !important
}
#tabBoxExample .tabSet LI {
    PADDING-BOTTOM: 0px !important; LIST-STYLE-TYPE: none; MARGIN: 0px 2px 0px 0px; PADDING-LEFT: 14px !important; PADDING-RIGHT: 0px !important; BACKGROUND: url(http://www.clientcide.com/wp-content/themes/clientsidev2/art/tab-off-l.gif) no-repeat left top; FLOAT: left !important; CURSOR: pointer; PADDING-TOP: 0px !important
}
#tabBoxExample .tabSet LI A {
    PADDING-BOTTOM: 0px !important; LINE-HEIGHT: 26px !important; PADDING-LEFT: 0px !important; PADDING-RIGHT: 12px !important; DISPLAY: block !important; FONT-FAMILY: arial !important; BACKGROUND: url(http://www.clientcide.com/wp-content/themes/clientsidev2/art/tab-off-r.gif) no-repeat right top; FLOAT: left !important; HEIGHT: 24px !important; COLOR: #545454 !important; FONT-SIZE: 10pt !important; OVERFLOW: hidden !important; FONT-WEIGHT: bold !important; TEXT-DECORATION: none !important; PADDING-TOP: 2px !important
}
#tabBoxExample .tabSet LI.on {
    BACKGROUND: url(http://www.clientcide.com/wp-content/themes/clientsidev2/art/tab-on-l.gif) no-repeat left top
}
#tabBoxExample .tabSet LI.on A {
    BACKGROUND: url(http://www.clientcide.com/wp-content/themes/clientsidev2/art/tab-on-r.gif) no-repeat right top; COLOR: #333
}
#tabBoxExample .panelSet {
    BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #fff; BORDER-TOP: #ccc 0px solid; BORDER-RIGHT: #ccc 1px solid; PADDING-TOP: 10px
}
#tabBoxExample .panelSet DT.stretchtoggle DIV.dtRight {
    BACKGROUND: url(http://www.clientcide.com/wp-content/themes/clientsidev2/art/acdn-headr-back.gif) #fff no-repeat right 50%
}
        
        </style>
        <script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js">
        </script>
        -->

<div id="tabBoxExample">
  <ul class="tabSet">
    <li class="off"><a>first tab</a></li>
    <li class="off"><a>second tab</a></li>
    <li class="off"><a>third tab</a></li>
  </ul>
  <div class="panelSet">
    <div class="panel">I'm the content for the first panel.</div>
    <div class="panel">
            <p>I'm the content for the second panel.</p>
            <p>I'm the content for the second panel.</p>
        </div>
    <div class="panel">
            <p>I'm the content for the third panel.</p>
            <p>I'm the content for the third panel.</p>
            <p>I'm the content for the third panel.</p>
        </div>
  </div>
</div>
        <script defer=defer>
new TabSwapper({
  selectedClass: 'on',
  deselectedClass: 'off',
  tabs: $$('#tabBoxExample li'),
  clickers: $$('#tabBoxExample li a'),
  sections: $$('div.panelSet div.panel'),
  /*remember what the last tab the user clicked was*/
  cookieName: 'tabSetExample',
  /*use transitions to fade across*/
  smooth: true,
    smoothSize: true
});
        </script>

转载于:https://www.cnblogs.com/zjm1126qqcom/archive/2009/05/23/1487759.html