公告板不同板块点击切换效果

<div class="gg">
			<div class="ncsc-form-goods">
				<ul id="tab" class="tab">
					<li>
						<input type="button" value="招标公告" class="current" id="but1">
					</li>
					<li>
						<input type="button" value="招标" class="" id="but2">
					</li>
				</ul>
				<div class="tab-box">
					<ul id="ul1">
						<li><a>补充发票的内容</a></li>
					</ul>
					<ul id="ul2" style="display: none;">
						<li><a>9折</a></li>
					</ul>
				</div>
			</div>

<script type="text/javascript">
   $(document).ready(function(){
      $("#but1").click(function(){
         $("#ul1").show();
         $("#ul2").hide();
         $("#but1").addClass("current");
         $("#but2").toggleClass("current");
      });
      $("#but2").click(function(){
         $("#ul2").show();
         $("#ul1").hide();
         $("#but2").addClass("current");
         $("#but1").toggleClass("current");
      });
   });
</script>


.gg{
   width: 250px;
   /* min-height: 1px; */
   _height: 1px;
   _display: inline;
   float: left;
   margin-left: 20px;
}
.ncsc-form-goods ul.tab {
   height: 30px;
   padding-left: 25px;
   margin: 10px 0px 2px 0px;
   background: url(../images/input.gif) 0px 0px repeat-x;
}
.tab-box{
   border: 1px solid #efefef;
   border-top:none;
   border-radius: 0px 0px 3px 3px;
   height: 213px;
}
.tab-box li{
   padding: 3px;
   border-bottom: 1px dotted #999999;
   margin: 0px 3px;
}

ul.tab li {
   float: left;
   margin-right: 6px;
}

ul.tab input {
   width: 100px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #666666;
   cursor: pointer;
   outline: none;
   blr: expression(this.hideFocus = true);
   border: 0px;
   background: url(../images/input.gif) 0px -30px no-repeat;
}

ul.tab input:hover {
   color: #333333;
}

ul.tab input.current {
   color: #2b2b2b;
   font-weight: bold;
   background: url(../images/input.gif) -120px -30px no-repeat;
}