jQuery带tab切换搜索框样式代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.search-hovertree-form {
575px;
margin: 100px auto;
overflow: hidden;
}
.search-hovertree-form .search-bd {
height: 25px;
}
.search-hovertree-form .search-bd li {
font-size: 12px;
60px;
height: 25px;
line-height: 25px;
text-align: center;
float: left;
cursor: pointer;
background-color: #eee;
color: #666;
}
.search-hovertree-form .search-bd li.selected {
color: #fff;
font-weight: 700;
background-color: #B61D1D;
}
.search-hovertree-form .search-hd {
height: 34px;
background-color: #B61D1D;
padding: 3px;
position: relative;
}
.search-hovertree-form .search-hd .search-hovertree-input {
490px;
height: 22px;
line-height: 22px;
padding: 6px 0;
background: none;
text-indent: 10px;
border: 0;
outline: none;
position: relative;
left: 3px;
top: 0;
z-index: 5;
#margin-left:-10px;
}
.search-hovertree-form .search-hd .btn-search {
70px;
height: 34px;
line-height: 34px;
position: absolute;
right: 3px;
top: 3px;
border: 0;
z-index: 6;
cursor: pointer;
font-size: 12px;
color: #fff;
font-weight: 700;
background: none;
outline: none;
}
.search-hovertree-form .search-hd .pholder {
display: inline-block;
padding: 2px 0;
font-size: 12px;
color: #999;
position: absolute;
left: 13px;
top: 11px;
z-index: 4;
background: url(http://hovertree.com/texiao/jquery/23/images/zoom.jpg) no-repeat 0 0;
padding-left: 25px;
top:11px;
}
.search-hovertree-form .search-hd .s2, .search-hovertree-form .search-hd #s2 {
display: none;
}
.search-hovertree-form .search-bg {
495px;
height: 34px;
background-color: #fff;
position: absolute;
left: 3px;
top: 3px;
z-index: 1;
}a{color:blue}
</style><meta charset="UTF-8">
<title> jQuery搜索切换 - 何问起</title><base target="_blank" />
</head>
<body>
<div class="search-hovertree-form">
<div >
$(function(){
//通用头部搜索切换
$('#search-hd .search-hovertree-input').on('input propertychange',function(){
var val = $(this).val();
if(val.length > 0){
$('#search-hd .pholder').hide(0);
}else{
var index = $('#search-bd li.selected').index();
$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);
}
})
$('#search-bd li').click(function(){
var index = $(this).index();
$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);
$('#search-hd .search-hover'+'tree-input').eq(index).show().siblings('.search-hovertree-input').hide(0);
$(this).addClass('selected').siblings().removeClass('selected');
$('#search-hd .search-hovertree-input').val('');
});
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.search-hovertree-form {
575px;
margin: 100px auto;
overflow: hidden;
}
.search-hovertree-form .search-bd {
height: 25px;
}
.search-hovertree-form .search-bd li {
font-size: 12px;
60px;
height: 25px;
line-height: 25px;
text-align: center;
float: left;
cursor: pointer;
background-color: #eee;
color: #666;
}
.search-hovertree-form .search-bd li.selected {
color: #fff;
font-weight: 700;
background-color: #B61D1D;
}
.search-hovertree-form .search-hd {
height: 34px;
background-color: #B61D1D;
padding: 3px;
position: relative;
}
.search-hovertree-form .search-hd .search-hovertree-input {
490px;
height: 22px;
line-height: 22px;
padding: 6px 0;
background: none;
text-indent: 10px;
border: 0;
outline: none;
position: relative;
left: 3px;
top: 0;
z-index: 5;
#margin-left:-10px;
}
.search-hovertree-form .search-hd .btn-search {
70px;
height: 34px;
line-height: 34px;
position: absolute;
right: 3px;
top: 3px;
border: 0;
z-index: 6;
cursor: pointer;
font-size: 12px;
color: #fff;
font-weight: 700;
background: none;
outline: none;
}
.search-hovertree-form .search-hd .pholder {
display: inline-block;
padding: 2px 0;
font-size: 12px;
color: #999;
position: absolute;
left: 13px;
top: 11px;
z-index: 4;
background: url(http://hovertree.com/texiao/jquery/23/images/zoom.jpg) no-repeat 0 0;
padding-left: 25px;
top:11px;
}
.search-hovertree-form .search-hd .s2, .search-hovertree-form .search-hd #s2 {
display: none;
}
.search-hovertree-form .search-bg {
495px;
height: 34px;
background-color: #fff;
position: absolute;
left: 3px;
top: 3px;
z-index: 1;
}a{color:blue}
</style><meta charset="UTF-8">
<title> jQuery搜索切换 - 何问起</title><base target="_blank" />
</head>
<body>
<div class="search-hovertree-form">
<div >
$(function(){
//通用头部搜索切换
$('#search-hd .search-hovertree-input').on('input propertychange',function(){
var val = $(this).val();
if(val.length > 0){
$('#search-hd .pholder').hide(0);
}else{
var index = $('#search-bd li.selected').index();
$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);
}
})
$('#search-bd li').click(function(){
var index = $(this).index();
$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);
$('#search-hd .search-hover'+'tree-input').eq(index).show().siblings('.search-hovertree-input').hide(0);
$(this).addClass('selected').siblings().removeClass('selected');
$('#search-hd .search-hovertree-input').val('');
});
})
</script>
</body>
</html>