***************** ? ?　j ?s ? ? *****************************************************************************************************// ?獲取 classNamefunction getByClass(clsName,parent){? var oParent=parent?document.getElementById(parent):document,? ? ? eles=[],? ? ? elements=oParent.getElementsByTagName('*');? for(var i=0,l=elements.length;i<l;i++){? ? if(elements[i].className==clsName){? ? ? eles.push(elements[i]);? ? }? }? return eles;};? ??? ?? ? // ?切換列表var skip=document.getElementById('skip'),? ? skip_list=document.getElementById('skip_list'), lis=skip_list.getElementsByTagName('li'),? ? skip_txt=document.getElementById('skip_txt');? ? // ? 切換列表? ? skip.onclick=function(){ skip_list.style.display='block'; }; ?? ? // ?鼠標滑過、離開和點擊選擇列表時 for(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover=function(){ ? ? ? ? this.className='selected'; }; lis[i].onmouseout=function(){ this.className=''; }; ? ?lis[i].onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; }; var id = this.id; ? ?attribute=getByClass('select_text',id)[0].getAttribute('href'); skip_list.style.display='none'; skip_txt.innerHTML=getByClass('select_text',id)[0].innerHTML; skip_txt.setAttribute('href',attribute); }; }; ? ? ? // ? 隱藏列表? ? ?skip_list.onmouseout=function(){ skip_list.style.display='none'; };************* ? ?H T M L 結構 ?*******************************************************************************************<div class="search_wrapper">? ? ? ? ? <form>? ? ? ? ? ? <div id="skip">?? ? ? ? ? ? ? ? <div class="skip"><a href="#" id="skip_txt">商品</a></div>? ? ? ? ? ? ? ? <i class="icon_1"></i>? ? ? ? ? ? ? ? <ul id="skip_list" class="skip_list" style="display:none;">? ? ? ? ? ? ? ? <li id="curriculum"><a href="#" class="select_text">商品</a></li>? ? ? ? ? ? ? ? <li id="school"><a href="#" class="select_text">店鋪</a></li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? ? ? <input type="text" id="search_input" class="search_input" placeholder="請輸入關鍵詞...">? ? ? ? ? <input type="submit" class="search" value="搜索">? ? ? ? ? </form>? ? ? ? ? </div>****************** ? C S S 樣式 ?*****************************************************************************.search_wrapper { position:relative; float: right; height: 45px; width: 451px; line-height: 45px; margin-top: 13px; border: 2px solid #7FC7A0; background-color: #474645; background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);}.search_wrapper a {color:#E3E8E7; text-decoration:none;}.search { width: 40px; height: 30px; border: 1px solid #BDF4E4; border-radius: 4px; background-color: #90D3E3; background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%); background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%); background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%); color: #283A35; font-family: "新宋體"; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); -moz-box-shadow: inset, 0 1px 0 #F3FAFB; -webkit-box-shadow:inset 2px 2px 0px #F3FAFB; box-shadow:inset 2px 2px 0px #F3FAFB;}.search :hover, search :focus { width: 40px; height: 30px; border-radius: 4px; background-color: #90D3E3; background-image: -webkit-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%); background-image: -moz-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%); background-image: -o-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%); background-image: linear-gradient(180deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%); }.search :active { outline: 0; ? ?? ? ?-moz-box-shadow: inset 1px 4px 0px 0px #F3FAFB; -webkit-box-shadow: inset 1px 4px 0px 0px #F3FAFB; box-shadow: inset 1px 4px 0px 0px #F3FAFB; }.search ::-moz-focus-inner { border: 0; }.skip {width:56px;float:left; margin: 0 2px;}.skip_list {width: 56px; border: 2px solid #7FC7A0; position:absolute; left: -2px; top:-2px; background-color: #006812; z-index: 2; display:block;}.search_input { height: 28px; width: 300px; border: solid #EDEDED 3px; font-size: 15px; font-weight: 600;}.selected {background-color: #474645; display:block;background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);}.icon_1 { width: 15px; height: 12px; float:left; margin: 16px 0; background: url(../images/i_1.jpg) left no-repeat;}