為什么點擊 店鋪標簽 時selected樣式加載不上 但是點擊寶貝標簽可以 給店鋪標簽 直接靜態加上selected樣式是可以的 就是點擊事件是不行
點擊第二個li標簽 selected樣式加載不上?
weibo_幸福長大了_0
2016-07-03
3 回答
舉報
0/150
提交
取消
2016-08-07
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事件，我按照老師寫的做不行，自己改了下，你看看我的
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="" /><!--chrom瀏覽器的語音功能-->
??????????????????????? <i class="iconfont">對應字符</i>
??????????????????? </div>
??????????????? </form>
??????? </div>
??? </div>
</body>
</html>
2016-07-05
代碼呢