                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

为什么点击店铺标签时selected样式加载不上但是点击宝贝标签可以给店铺标签直接静态加上selected样式是可以的就是点击事件是不行

点击第二个li标签 selected样式加载不上

weibo_幸福长大了_0

2016-07-03

源自：搜索框制作 3-7

关注问题我要回答

406

操作

收起

3 回答

Evilcome
2016-08-07

addEvent('tab_1','mouseover',function(){
if (this.className.indexOf('selected')<0) {
this.className += ' selected';
}
getDOM('tab_2').className = '';
});
addEvent('tab_1','click',function(){
getDOM('search-list').className = ' search-list';
if (this.className.indexOf('selected')<0) {
this.className += ' selected';
}
getDOM('tab_2').className = '';
});
addEvent('tab_2','click',function(){
getDOM('search-list').className = ' search-list';
if (this.className.indexOf('selected')<0) {
this.className += ' selected';
}
getDOM('tab_1').className = '';
});
addEvent('tab_2','mouseover',function(){
if (this.className.indexOf('selected')<0) {
this.className += ' selected';
}
getDOM('tab_1').className = '';
});

不需要增加moveout事件，我按照老师写的做不行，自己改了下，你看看我的

0 回复有任何疑惑可以回复我~

收起回答

Evilcome

我的search-list 的class和id一样的

2016-08-07 回复有任何疑惑可以回复我~

weibo_幸福长大了_0 提问者
2016-07-20

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>taobao demo</title>
<script>
window.onload=function(){
   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-tabs","mouseover",function(){
       if(this.className.indexOf("trigger-hover")<0){
           this.className+=" trigger-hover";/*注意：在动态添加多个样式表时，连接字符串时需要加空格*/
       }
       });
   addEvent("tab_1","mouseover",function(){
       if(this.className.indexOf("selected")<0){
           this.className+=" selected";
           }
       });
   addEvent("tab_1","mouseout",function(){

               this.className="";


       });
   addEvent("tab_1","click",function(){
       getDOM("search-tabs").className="search-list";

       });
   addEvent("tab_2","click",function(){
       getDOM("search-tabs").className="search-list";

       });
   addEvent("tab_2","mouseover",function(){
       if(this.className.indexOf("selected")<0){
           this.className+=" selected";
           }
       });
   addEvent("tab_2","mouseout",function(){

           this.className="";

       });
   }

</script>
<style>
   @font-face{font-family:iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);}
   body{
       font:12px/1.5 tahoma,arial,sans-serif;
       }
   a{text-decoration:none;color:#6c6c6c}
   .search-container{
       position:relative;
       }
    .search-tips{
       float:right;
       padding: 0 0 3px 15px;
       }
   .search-button{
       float:right;
       }
   .btn-search{
       background:url(img/TB1Z4WGMpXXXXbyaXXX6sGuHVXX-458-458.png);
       width:80px;
       height:33px;
       background-position:-125px -59px;
       border:0;
       cursor:pointer;
       }
   .search-common-panel{
       background:#f50;
       height:29px;
       padding:2px 0px 2px 80px;
       overflow:hidden;
       }
   .search-common-panel input{
       margin:0;
       padding:0;
       background:#fff;
       width:100%;
       height:29px;
       line-height:29px;
       border:0 none;
       outline:0;
       }
   .search-common-panel i{
       position:absolute;
       top:10px;
       left:86px;
       z-index:2;
       color:#ccc;
       }
   .iconfont{
       font-family:iconfont;
       font-size:12px;
       font-style:normal;
       }
   ul{
       list-style:none;
       height:29px;

       }
   ul,li{
       margin:0;
       padding:0;

       }

   .search-list{
       position:absolute;
       top:2px;
       left:2px;
       width:80px;
       height:29px;
       overflow:hidden;
       background:#fff;
       border-left:1px solid #f6f6f6;
       border-right:1px solid #e5e5e5;
       }
   .search-list li{
       display:none;
       height:29px;
       line-height:29px;
       text-align:center;
       overflow:hidden;
       }
   .search-list li a{
       color:#6c6c6c;
       }
   .search-list .selected{
       background:#f6f6f6;
       display:block;
       }
   .trigger-hover{
       height:58px;
       }
   .trigger-hover li{
       display:block;
       }
</style>

</head>

<body>
   <div class="search-container">
            <div id="search-tabs" class="search-list">
                <ul>
                    <li id="tab_1" class="selected">
                        <a href="#">宝贝</a>
                    </li>
                    <li id="tab_2" class="" >
                        <a href="#">店铺</a>
                    </li>
                </ul>
            </div>
        <div class="search-pannel">
                <form>
                    <div class="search-tips">
                        <a href="#">
                            高级</br>搜索
                        </a>
                    </div>
                    <div class="search-button">
                        <button type="submit" class="btn-search"></button>
                    </div>
                    <div class="search-common-panel">
                        <input type="text" x-webkit-speech="" />
                        <i class="iconfont">对应字符</i>
                    </div>
                </form>
        </div>
    </div>
</body>

</html>