一個不錯的CSS類比的按鈕效果

來源:互聯網
上載者:User
代碼如下:
<style type="text/css"><br /><!--<br />.btnOFF{padding:3px;border:1px outset;cursor:pointer;background-color: green;width:100px;height:16px;text-align:center;}<br />.btnON{padding:3px;border:1px inset;background-color: #CCCC33;width:100px;height:16px;text-align:center;color:red;}<br />--><br /></style></p><p><script language="JavaScript"><br /><!--<br />function setEffect(link_id)<br />{<br />var i;<br />for(i=0;i<link.length;i++)<br />{<br />if(i != link_id)<br />{<br />link[i].className = "btnOFF";<br />}<br />else<br />{<br />link[i].className = "btnON";<br />}<br />}<br />}<br />//--><br /></script></p><p><p align=center><span id="link" class="btnOFF" onclick="setEffect(0)">Google</span><span id="link" class="btnOFF" onclick="setEffect(1)">Baidu</span><span id="link" class="btnOFF" onclick="setEffect(2)">Sina</span><span id="link" class="btnOFF" onclick="setEffect(3)">Sohu</span><span id="link" class="btnOFF" onclick="setEffect(4)">CSDN</span><span id="link" class="btnOFF" onclick="setEffect(5)">CnBlogs</span></p>
[Ctrl+A 全選 提示:你可先修改部分代碼,再點運行代碼]
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.