jq漂亮实用的select，select选中后，显示对应内容

下载附件：http://www.csrcode.cn/p_w_picpaths/jquery.js
http://www.csrcode.cn/p_w_picpaths/20110827/selectbg.jpg

http://www.csrcode.cn/p_w_picpaths/20110827/g

将以下附件放入p_w_picpaths文件夹

css

<style type="text/css">
.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url( p_w_picpaths/selectbg.jpg) right 0px no-repeat;color:#fff;}
.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}
ul{list-style:none;margin:0;padding:0;}
ul li{height:24px;background:#666px;text-align:center;}
.contentbox{ width:500px; height:300px; background:#999;font-size:26px; color:#fff; font-weight:bold;}
</style>

js

<script type="text/javascript" src="p_w_picpaths/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var selects=$("#select");
  var options=$("#option");
  var state=true;
  selects.click(function(){
  if(state){
  if(!($(this).is(":animated"))){
    options.slideDown();
  }else{
    options.css("display","none");
  }
   state=false;
   }else{
   if(!($(this).is(":animated"))){
   options.slideUp();
   }else{
    $(this).stop(true,true);
    options.css("display","");
   }
   state=true;
   }
  });
  selects.hover(function(){
  $(this).css("background","url( p_w_picpaths/g) right 0px no-repeat");
 },
 function(){
 $(this).css("background","url( p_w_picpaths/selectbg.jpg) right 0px no-repeat");
 });
  $("li").hover(function(){
   $(this).css("background","#990000").css("color","#ff9900");
  },
  function(){
   $(this).css("background","#820014").css("color","#fff");
  });
  $("li").click(function(){
   $(this).css("background","#c00").css("color","#ffffff");
   options.css("display","none");
   selects.children("span").text($(this).html());
   $(".valt").val($(this).attr("tip"));
   var sel_value = $(this).attr("tip");
   var con_class = "." + sel_value;
   $(".contentbox").css("display","none");
   $(con_class).css("display","block");
   state=false;
  });
  options.click(function(){
   selects.click(function(){return false;});
  });
 })
</script>

html

您的选择是：<input type="text" class="valt" value="">
<div class="select" id="select"><span>请选择分类</span>
 <div class="option" id="option">
  <ul>
   <li tip="div1">1推荐课程</li>
   <li tip="div2">2资讯中心</li>
   <li tip="div3">3辅导专区</li>
   <li tip="div4">4高考辅导</li>
   <li tip="div5">5招生简章</li>
   <li tip="div6">6招生信息</li>
  </ul>
 </div>
</div>
<div class="div1 contentbox">没错就是这样的，功能实现了，样式再调下。</div>
<div class="div2 contentbox" style="display:none">有什么不清楚的可以和我交流</div>
<div class="div3 contentbox" style="display:none">需要修改请联系<span style=" font-size:16px;color:#FC3;">（桔子）</span></div>
<div class="div4 contentbox" style="display:none">样式是可以修改的</div>
<div class="div5 contentbox" style="display:none">jq是可以修改的</div>
<div class="div6 contentbox" style="display:none">改文档是可以修改的</div