纯CSS实现的选项卡效果

2022-07-15 80酷酷网 80kuku.com

表现、结构、行为分离的选项卡效果,

以下是HTML网页特效代码，点击运行按钮可查看效果：以下是程序代码<style type="text/css" media="screen"></style><div id="body"> <div id="nav"> <a href="#" class="nav_button" id="button1" onmouseover="main2.style.display='none';main3.style.display='none';main1.style.display='block';button2.className='nav_button';button3.className='nav_button';" onmouseout="this.className='nav_button_msout'"> 灞上秋居 </a> <a href="#" class="nav_button" id="button2" onmouseover="main1.style.display='none';main3.style.display='none';main2.style.display='block';button1.className='nav_button';button3.className='nav_button';" onmouseout="this.className='nav_button_msout'"> 新嫁娘 </a> <a href="#" class="nav_button" id="button3" onmouseover="main1.style.display='none';main2.style.display='none';main3.style.display='block';button1.className='nav_button';button2.className='nav_button';" onmouseout="this.className='nav_button_msout'"> 塞下曲?其二 </a> </div> <div id="main"> <div id="main1" none"> <p>灞原风雨定，</p> <p>晚见雁行频。</p> <p>落叶他乡树，</p> <p>寒灯独夜人。</p> <p>空园白露滴，</p> <p>孤壁野僧邻。</p> <p>寄卧郊扉久，</p> <p>何年致此身。</p> </div> <div id="main2" none"> <p>三日入厨下，</p> <p>洗手作羹汤。</p> <p>未谙姑食性，</p> <p>先遣小姑尝。</p> </div> <div id="main3" none"> <p>饮马渡秋水，</p> <p>水寒风似刀。</p> <p>平沙日未没，</p> <p>黯黯见临洮。</p> <p>昔日长城战，</p> <p>咸言意气高。</p> <p>黄尘足今古，</p> <p>白骨乱蓬蒿。</p> </div> </div></div></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

其实JS很大一部分可以用其他方法代替，如可代替DIV的隐现，服务器语言也可以代替一部分逻辑。