为什么我按照课程的代码写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 Documentvar 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，引入一下就可以了