1. 点击每个选项卡时，搜索框内对应的提示文字改变
2. 搜索框获得焦点时，默认提示文字消失；失去焦点时默认提示文字显示。
3. 搜索框内内容为用户输入的内容时，获得焦点失去焦点不清空/显示默认提示文字。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可切换的Tab搜索框</title>
</head>
<style>
.search {margin:0 auto 10px; position:relative; }
.search .bar { width:558px; height:64px; border:1px solid #c40d0e; position:absolute; top:16px; left:-1px; background:#e21c01; border-radius:5px; box-shadow:1px 2px 2px rgba(0,0,0,0.15); }
.search .menu { position:absolute; top:-27px; }
.search .menu li { float:left; width:78px; height:25px; margin-right:1px; display:inline-block; border:1px solid #f8d0bf; border-bottom:none; text-align:center; line-height:25px; font-size:14px; cursor:pointer; border-radius:5px 5px 0 0; box-shadow:1px 0 2px rgba(176,176,176,0.3);background-color: #fff; }
.search .menu .active { border:1px solid #e21c01; position:relative; top:-1px; height:27px; background:#e21c01; color:#fff; font-weight:bold; text-shadow:2px 2px 3px rgba(0,0,0,0.25); }
.search .form { position:absolute; left:39px; top:36px; z-index:3; }
.search .form .text { width:380px; height:22px; line-height:22px; padding:0 12px; border:none; background:#fff1ef; border-radius:3px; float:left; margin-right:10px; font-size:12px; font-family:'微软雅黑'; color:#ea7a7a; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.25); }
.search .form .btn { width:63px; height:24px; border:none;cursor: pointer;border-radius: 5px;}
</style>
<body>
<div id="J_search" class="search">
<div class="bar">
<ul class="menu" id="menu">
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
</div>
<div class="form">
<form action="#">
<input class="text" type="text" value="例如：……" />
<input class="btn" type="submit" value="搜索" />
</form>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js""></script>
<script>
$(function (){
// 切换搜索框
(function (){
var aLi = $('#menu li');
var oText = $('#J_search').find('.form .text');
var arrText = [
'输入框文字1',
'输入框文字2',
'输入框文字3',
'输入框文字4',
'输入框文字5'
];
var iNow = 0;
oText.val(arrText[iNow]);
aLi.each(function ( index ){
$(this).click(function (){
aLi.attr('class', '');
$(this).attr('class', 'active');
iNow = index;
oText.val(arrText[iNow]);
});
});
oText.focus(function (){
if( $(this).val() == arrText[iNow] ) {
$(this).val('');
}
});
oText.blur(function (){
if( $(this).val() === '' ) {
oText.val(arrText[iNow]);
}
});
})();
});
</script>
</html>
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！