为什么我按照课程的代码写js,不能实现效果？

Question

/*************   html     ************/

<div class="search_wrapper">

          <form>

            <span> 

                <a href="#" id="search_tab">商品

                             <i class="icon_1"></i>

                </a>

                <span id="search_list" class="search_tab">

                             <a href="#" id="search_tab1" class="selected">商品</a>

                             <a href="#" id="search_tab2">店铺</a> 

                </span>

          </span> 

            <span>

                    <input type="text" id="search_input" class="search_input" placeholder="请输入关键词...">

                    <input type="submit" value="搜索">

            </span>

          </form>

</div>

/*************   css    ************/

.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_tab {display: none;}

.search_tab_show {width: 56px; border: 2px solid #7FC7A0; position:absolute; left: -2px; top:-2px; display: block;        background-color: #50887F;}

.search_input {height:30px; width: 300px;}

.search_input_tab_show {margin-left: 54PX; width: 340px;}

.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%);}

/*************   js    ************/

// JavaScript Document

var getDOM = function(id){

return document.getElementById(id);

}

var addEvent = function(id,event,fn){

var el = getDOM(id)||document;

if(el.addEventListener){

el.addEventListener(event,fn,false);

}else if(el.attachEvent){

el.attachEvent('on'+event,fn);

}

}

addEvent('search_tab','click',function(){

getDOM('search_list').className ='search_tab_show';

getDOM('search_tab').className ='search_tab';

getDOM('search_input').className+=' search_input_tab_show';

})

addEvent('search_tab1','mouseover',function(){

if(this.classsName.indexof('selected')<0){

this.className+=' selected';

}

});

addEvent('search_tab1','mouseout',function(){

this.className ='';

});

addEvent('search_tab2','mouseover',function(){

if(this.classsName.indexof('selected')<0){

this.className+=' selected';

}

});

addEvent('search_tab2','mouseout',function(){

this.className ='';

});

/*************   后面引入jquery实现的效果    ************/

我两个版本都引入过一次。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

没有引入jquery库，里面用到了jquery库的方法 indexof，引入一下就可以了