jQuery样式切换插件演示-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:script type="text/javascript" src="jquery-1.2.6.min.js" mce_src="jquery-1.2.6.min.js"></mce:script> <title>jQuery change button </title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> body.narrow .chapter { width: 400px; font-size:12px; } body.large .chapter { font-size: 1.5em; } .selected { font-weight: bold; } #switcher div { float:left; border:#000 1px solid; cursor: pointer; } .hidden { display: none; } #switcher .hover { cursor: pointer; background-color: #afa; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="switcher"> <h3>Style Switcher</h3> <div class="button selected" id="switcher-normal">Normal</div> <div class="button" id="switcher-narrow">Narrow Column</div> <div class="button" id="switcher-large">Large Print</div> </div> <br/> <div class="chapter"> I love being 1/3 of Paravel. I don’t know how other web shops work, but I do know that I like how we roll. It’s taken some hard work to build the team as well as the company, but I wouldn’t trade all the psds, lines of code and fisticuffs for anything. With that in mind, I thought a brief, selective glance over the past few years might be of interest. Sure, we’ve faced our share of challenges and still do, but we’re genuinely… </div> </body> </html>

基本jquery代码