JQuery可切换的tab+搜索框

时间：2017-01-15

功能说明：
1. 点击每个选项卡时，搜索框内对应的提示文字改变
2. 搜索框获得焦点时，默认提示文字消失；失去焦点时默认提示文字显示。
3. 搜索框内内容为用户输入的内容时，获得焦点失去焦点不清空/显示默认提示文字。

代码如下：

<!DOCTYPE html>

<head>

<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>

</ul>

</div>

</form>

</div>

</body>

$(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>

上一条：PHP显示Deprecated: Assigning the return value of new by refere 下一条:自适应网页设计的方法

JQuery可切换的tab+搜索框

相关文章

最新文章