淘寶首頁交互2--搜索框切換

1.HTML代碼：

<div class="search">
    <div class="title clear">
        <a class="goods active" href="#">寶貝</a>
        <a class="tmall" href="#">天貓</a>
        <a class="store" href="#">店鋪</a>
    </div>
    <div class="box-1">
        <form class="form clear" action="#">
            <input class="text" type="text">
            <input class="submit" type="submit" value="搜索">
        </form>       
        <ul class="clear">
            <li><a class="hot" href="#">JORDAN官方</a></li>
        </ul>
    </div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>

2.JS代碼：

function searchBox() {
    var Search = document.getElementsByClassName('search');
    var Goods = Search.getElementsByClassName('goods');
    var Tmall = Search.getElementsByClassName('tmall');
    var Store = Search.getElementsByClassName('store');

    var Box_1 = Search.getElementsByClassName('box-1');
    var Box_2 = Search.getElementsByClassName('box-2');
    var Box_3 = Search.getElementsByClassName('Box_3');

    var Text = Search.getElementsByClassName('text');

    var val = null; //設置空指針對象

    Text[0].focus(); //初始化獲取焦點

    //切換導航
    Goods.onclick = function() {
        addClass(Goods, 'active');
        removeClass(Tmall, 'active');
        removeClass(Store, 'active');
        Goods.style.display('block');
        Tmall.style.display('none');
        Store.style.display('none');

        Text[0].focus();
        Text[0].value = val;
        if( Text[0].value != ' ' ) {
            Text[0].style.background = '#fff';
        } else {
            Text[0].style.background = 'url(須要的背景文字圖) no-repeat top left';
        }
    }
    Tmall.onclick = function() {
        addClass(Tmall, 'active');
        removeClass(Goods, 'active');
        removeClass(Store, 'active');
        Tmall.style.display = 'block';
        Goods.style.display = 'none';
        Store.style.display = 'none';

        Text[1].focus();
        Text[1].value = val;
        if (Text[1].value != ' ') {
            Text[1].style.background = '#fff';
        } else {
            Text[1].style.background = 'url(指定文字背景圖片或者插入文字) no-repeat top left';
        }
    }
    Store.onclick = function() {
        addClass(Store, 'active');
        removeClass(Goods, 'active');
        removeClass(Tmall, 'active');
        Store.style.display = 'block';
        Goods.style.display = 'none';
        Tmall.style.display = 'none';

        Text[2].focus();
        Text[2].value = val; 
        if (Text[2].value != ' ') {
            Text[2].style.background = '#fff';
        } else {
            Text[2].style.background = 'url()';
        }
    }
    //當有文字輸入，清除對話框中的默認背景
     //index 屬性可返回下拉列表中選項的索引位置。
    //onkeyup 事件會在鍵盤按鍵被鬆開時發生。
    for (var i = 0; i < Text.length; i++) {
            Text[i].onkeyup =function() {
                if (this.value != ' ') {
                    val = this.value;
                    this.style.background = '#fff';
                } else {
                    val = this.value;
                    if (this.index == 0 ) {
                        this.style.background = 'url(1)';
                    } 
                    else if (this.index == 1 ) {
                        this.style.background = 'url(2)';
                    } else {
                        this.style.background = 'url(3)';
                    }
                }
            }
        }    

//添加類名函數
function addClass(obj, newClass) {
    var oldClass = obj.className;
    if (oldClass == '') {
        obj.className = newClass;
        return false;
    }
    var arr = oldClass.split(" ");
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == newClass) {
            return false;
        }
    }
    arr.push(newClass);
    obj.className = arr.join(" ");
}
//刪除類名函數
function removeClass(obj, old) {
    var oldClass = obj.className;
    var arr = oldClass.split(" ");
    for (var i = 0; i < arr.length; i++) {
        if( arr[i] == old ) {
            arr.splice(i,1)
            break;
        }
    }
    obj.className = arr.join(" ");
}

}

知識：

　　focus()： 初始化獲取焦點；

　　split( ) ：基於指定的分隔符將一個字符串分割成多個子字符串，並將結果（逗號隔開）放入一個數組中。

　　join( ) ：將數組變爲字符串，每一個元素以指定樣式隔開。

　　splice（）： 刪除：splice（0， 2）； 從數組第一項的位置開始， 刪除兩項。

　　　　　　　　插入：splice（2， 0， "red", "green"）；從數組的第三項，刪除零項，插入red ， green 字符串。

　　　　　　　　替換：splice（2， 1， "red" )； 把數組的第三項用red 替換。