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

来源：互联网发布：java string 存储大小编辑：程序博客网时间：2024/05/16 01:55
<!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>
阅读全文
0 0