jQuery带tab切换搜索框样式代码

时间：2015-12-31 12:07:05 阅读：325 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

.search-hovertree-form {
width: 575px;
margin: 100px auto;
overflow: hidden;
}

.search-hovertree-form .search-bd {
height: 25px;
}

.search-hovertree-form .search-bd li {
font-size: 12px;
width: 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 {
width: 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 {
width: 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 {
width: 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 id="search-bd" class="search-bd">
<ul>
<li class="selected">找商品</li>
<li>找商家</li>
</ul>
</div>
<div id="search-hd" class="search-hd">
<div class="search-bg"></div>
<input type="text" id="s1" class="search-hovertree-input">
<input type="text" id="s2" class="search-hovertree-input">
<span class="s1 pholder">食品酒水半价抢疯</span>
<span class="s2 pholder">搜商家名称</span>
<button id="submit" class="btn-search" value="搜索">搜索</button>
</div>
</div>
<div style="text-align:center;clear:both;margin-top:10px">
<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/jquery/">jQuery</a>
<a href="http://hovertree.com/h/bjae/6no8y0fm.htm">原文</a>
<a href="http://hovertree.com/map/">导航</a>
</div>
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>

jQuery带tab切换搜索框样式代码

标签：

原文地址：http://www.cnblogs.com/mmx-jiayou/p/5090925.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行