<!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"?xml:lang="en">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;charset=UTF-8">
????<title>淘寶搜索框</title>
????<style?type="text/css">
????*{
????????padding:?0;
????????margin:?0;
????}
????body{
????????font-family:?arial,'Hiragino?Sans?GB',"\5b8b\4f53",sans-serif;
????}
????#search{
????????float:?left;
????????height:?31px;
????????border:?2px?solid?#f50;
????????margin:?50px;
????}
????.search-pannel{
????????width:?700px;
????}
????.search-txt{
????????padding-left:?75px;
????????float:?left;
????????width:?500px;
????????height:?30px;
????????line-height:?30px;
????????overflow:?hidden;
????????font-size:?14px;
????????border:?none;
????????outline:?0;????//focus時不顯示外邊框
????}
????.search-btn{
????????border:?none;
????????background:?#f50;
????????width:?80px;
????????height:?32px;
????????line-height:?30px;
????????text-align:?center;
????????font-size:?14px;
????????color:?#fff;
????????cursor:?pointer;
????????float:?right;
????}
????.search-list{
????????position:?absolute;
????????width:?70px;
????????height:?29px;
????????display:?block;
????????line-height:?30px;
????????text-align:?center;
????????overflow:?hidden;
????????border:?1px?solid?#ccc;
????????background:?#fff;
????}
????.search-list?li{
????????cursor:?pointer;
????????font-size:?13px;
????????color:?#666;
????????height:?31px;
????????width:?70px;
????????overflow:?hidden;
????????display:?none;
????????line-height:?32px;
????}
????.trigger-hover{
????????height:?auto;
????}
????.trigger-hover?li{
????????display:?block;
????????height:?32px;
????}
/*由于.search-list?li樣式的優(yōu)先級高于這個樣式，所以需要加前綴！*/
????.search-list?.selected{
????????background:?#f6f6f6;
????????display:?block;??/*顯示選中元素*/
????}
????</style>
</head>
<body>
????<div?id="search">
????????<div?id="search-tab">
????????????<ul>
????????????????<li?id="li1">寶貝</li>
????????????????<li?id="li2">店鋪</li>
????????????</ul>
????????</div>
????????<div>
????????????<form?action="">
????????????????<input?type="text"?placeholder="請輸入要搜索的詞"?/>
????????????????<input?type="submit"?value="搜索"/>
????????????</form>
????????</div>
????</div>
????<script?type="text/javascript">
????//事件綁定函數(shù)
????function?addEvent(obj,event,fn){
????????if(obj.addEventListener){
????????????obj.addEventListener(event,fn,false);
????????}
????????else?if(obj.attachEvent){
????????????obj.attachEvent('on'+event,fn);
????????}
????}
????var?tab=document.getElementById('search-tab');
????addEvent(tab,'mouseover',function(){
????????this.className+="?trigger-hover";
????})
????addEvent(tab,'mouseout',function(){
????????this.className="search-list";
????})
????var?lis=tab.getElementsByTagName("li");
????for(var?i=0;i<lis.length;i++){
????????addEvent(lis[i],'mouseover',function(){
????????????this.style.background='#f6f6f6';
????????})
????????addEvent(lis[i],'mouseout',function(){
????????????this.style.background='#fff';
????????})
????????addEvent(lis[i],'click',function(){
????????????for(var?j=0;j<lis.length;j++){
????????????????lis[j].className="";
????????????}
????????????this.className="selected";
????????})
????}
????</script>
</body>
</html>這里是我寫的代碼點擊標(biāo)簽切換成店鋪后，再點擊顯示菜單時，怎么實現(xiàn)“店鋪”與“寶貝”兩個標(biāo)簽的位置互換？？？求解?。?！不甚感激?。?！
關(guān)于淘寶搜索框的代碼問題
死丟皮少女p
2015-11-08 21:40:17
