利用spry来实现页面的选项卡页面
利用spry来实现页面的选项卡页面
html页面的主要代码（默认运用spry自带的脚本）
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
}
img{float:left;}
-->
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><span>老师</span></li>
<li class="TabbedPanelsTab" tabindex="0"><span>学生</span></li>
<li class="TabbedPanelsTab" tabindex="0"><span>明星</span></li>
<li class="TabbedPanelsTab" tabindex="0"><span>书籍</span></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><ul id="list">
<li>1.张洋.</li>
<li>2.庞天丙.</li>
<li>3.沈兰宁.</li>
<li>4.兰洁.</li>
<li>5.任明贵.</li>
</ul></div>
<div class="TabbedPanelsContent"><ul id="list">
<li>1.汤楠.</li>
<li>2.闫转.</li>
<li>3.尚成.</li>
<li>4.王习习.</li>
<li>5.付雅.</li>
</ul></div>
<div class="TabbedPanelsContent"><ul id="list">
<li>1.张翰.</li>
<li>2.郑爽.</li>
<li>3.刘诗诗.</li>
<li>4.吴奇隆.</li>
<li>5.何炅.</li>
</ul></div>
<div class="TabbedPanelsContent"><ul id="list">
<li>1.Asp.</li>
<li>2.Php.</li>
<li>3.Div+Css.</li>
<li>4.Photos.</li>
<li>5.Flash.</li>
</ul></div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">标题1</div>
<div class="CollapsiblePanelContent"><img src="3.jpg" border="0">健康的法律考试的法律考试的进了深刻的解</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">标题2</div>
<div class="CollapsiblePanelContent"><img src="4.jpg" border="0">空间的法规科了解对方离交付给旅客的</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">标题3</div>
<div class="CollapsiblePanelContent"><img src="5.jpg" border="0">是打工经历的客房的法律课国家的立法看</div>
</div>
<p> </p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab top">标题 1</div>
<div class="AccordionPanelContent">放路口时间的法律会计师的实力的会计法律考试的解放深刻地方</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onmousemove="Accordion1.openFirstPanel(this.parentNode);">标题 2</div>
<div class="AccordionPanelContent">立法科技管理的会计法规</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">标题 3</div>
<div class="AccordionPanelContent">离开大家分工的立法机关领导及开发过</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">标题 4</div>
<div class="AccordionPanelContent">够了的开发几个了地方</div>
</div>
</div>
<p> </p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
