<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div,body,h2,span,ul,li{margin:0;padding:0; list-style:none;} .all{500px;border:1px solid #aaa;margin:50px auto;padding:10px;} .all h2{height:30px; text-align:center; line-height:30px;} .all h2 span{ display:inline-block;100px;height:30px;margin-right:10px;background:#aaa; cursor:pointer;} .all h2 span.current{background:#f5f ;} ul{height:200px; background:#f5f; cursor:pointer;} ul li{display:none;} ul li.current{display:block;} </style> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //初始化选中医保卡充值单选按钮 $(document).ready(function(){ $('[name="change"]:radio').each(function(){ if(this.value=='A'){ this.checked=true; } }); }); $('#box span').click(function(){ $(this).addClass('current').siblings().removeClass(); $('#box ul li').eq($(this).index()).addClass('current').siblings().removeClass(); }); }); </script> </head> <body> <div id="box" class="all"> <h2> <span class="current"><input name="change" type="radio" value="A" checked="checked" >0</span> <span><input name="change" type="radio" value="B">1</span> <span><input name="change" type="radio" value="C">2</span> <span><input name="change" type="radio" value="D">3</span> </h2> <ul> <li class="current"><div>0</div></li> <li><div>1</div></li> <li><div>2</div></li> <li><div>3</div></li> </ul> </div> </body> </html>
