关于淘宝搜索框的代码问题

<!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样式的优先级高于这个样式，所以需要加前缀！*/
    .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">

    //事件绑定函数
    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>

这里是我写的代码

点击标签切换成店铺后，再点击显示菜单时，怎么实现“店铺”与“宝贝”两个标签的位置互换？？？

求解！！！不甚感激！！！

死丢皮少女p

浏览 2192回答 3

3回答

echo_kinchao

是不是位置或者显示属性写的不好

0 0

李晓健

看了好几遍，没看出来你这页面是个什么样式，看起来总是乱动，你先把基本样式调好吧

0 0

随时随地看视频慕课网APP