这个是我跟着课程写的 js**************************************************************************
function getByClass(clsName,parent){
var oparent=parent?document.getElementById(parent):document;
eles=[],
elements=oparent.getElementsByTagName('*');
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].clssName==clsName){
eles.push(elements[i]);
}
}
return eles;
};
// 切换列表
var skip=document.getElementById('skip'),
skip_list=document.getElementById('skip_list'),
lis=skip_list.getElementsByTagName('li'),
skip_txt=document.getElementById('skip_txt');
skip.onclick=function(){
skip_list.style.display='block';
};
// 鼠标滑过、离开和点击选择列表时
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.className='selected';
}
lis[i].onmouseout=function(){
this.className='';
}
lis[i].onclick=function(){
var id = this.id;
skip_list.style.display='none';
skip_txt.innerHTML=getByClass('select_text',id)[0].innerHTML;
}
};
我想做一个切换效果
这个 HTML 结构*****************************************************************************************
<div class="search_wrapper">
<form>
<div>
<div class="skip" id="skip"><a href="#" id="skip_txt">商品</a></div>
<i class="icon_1"></i>
<ul id="skip_list" class="skip_list" style="display:none;">
<li id="curriculum"><a href="#" class="select_text">商品</a></li>
<li id="school"><a href="#" class="select_text">店铺</a></li>
</div>
<input type="text" id="search_input" class="search_input" placeholder="请输入关键词...">
<input type="submit" class="search" value="搜索">
</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_wrapper a {color:#E3E8E7; text-decoration:none;}
.search {
width: 40px;
height: 30px;
border: 1px solid #BDF4E4;
border-radius: 4px;
background-color: #90D3E3;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
color: #283A35;
font-family: "新宋体";
font-weight: bold;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: inset, 0 1px 0 #F3FAFB;
-webkit-box-shadow:inset 2px 2px 0px #F3FAFB;
box-shadow:inset 2px 2px 0px #F3FAFB;
}
.search :hover, search :focus {
width: 40px;
height: 30px;
border-radius: 4px;
background-color: #90D3E3;
background-image: -webkit-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
background-image: -moz-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
background-image: -o-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
background-image: linear-gradient(180deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
}
.search :active {
outline: 0;
-moz-box-shadow: inset 1px 4px 0px 0px #F3FAFB;
-webkit-box-shadow: inset 1px 4px 0px 0px #F3FAFB;
box-shadow: inset 1px 4px 0px 0px #F3FAFB;
}
.search ::-moz-focus-inner {
border: 0;
}
.skip {width:56px;float:left; margin: 0 2px;}
.skip_list {width: 56px; border: 2px solid #7FC7A0; position:absolute; left: -2px; top:-2px; background-color: #50887F; z-index: 2; display:block;}
.search_input { height: 28px; width: 300px; border: solid #EDEDED 3px; font-size: 15px; font-weight: 600;}
.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%);}
.icon_1 { width: 15px; height: 12px; float:left; margin: 16px 0; background: url(../images/i_1.jpg) left no-repeat;}
摩诃迦叶
相关分类