运行效果图： - 查看效果-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的类似淘宝网站搜索框样式代码如下

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title淘宝网选项卡类型搜索框样式代码/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $().bodys p ').不是(' :first ').hide()；$('.搜索框ul li ').将鼠标移到(function(){ var index=$(this)).index()；if(index==0){ $(this).查找(' a ').添加CLaSS(“style 1”)；$('li ').等式(1)。查找(' a ').移除CLaSS(“style 2”)；$('li ').等式(2)。查找(' a ').移除CLaSS(“style 3”)；} if(index==1){ $(this).查找(' a ').添加CLaSS(“style 2”)；$('li ').等式(0).查找(' a ').移除CLaSS(" style 1 ")；$('li ').等式(2)。查找(' a ').移除CLaSS(“style 3”)；} if(index==2){ $(this).查找(' a ').添加CLaSS(“style 3”)；$('li ').等式(0).查找(' a ').移除CLaSS(" style 1 ")；$('li ').等式(1)。查找(' a ').移除CLaSS(“style 2”)；} var索引=$(this).index()；$('.bodys p ').eq(指数)。显示()。兄弟姐妹()。hide()；});});/script style type=' text/CSS ' * { margin :0；划水：0;列表样式-:型无；}a，img { border:0}/* searchbox */.searchbox { width:520px高度：80 pxmargin:40px auto 0 auto}。searchbox ul { height:35px宽度width:500pxlist样式：无；左边距左侧：20像素.searchbox ul li{ float:left} .阿利搜索框{ float:left线高：35 pxpadding:0 20px文本装饰：无；color : # 000 font-size :14 px；字体粗细：加粗；}.searchbox ul li .style1{背景色： # 000;color:#fff} .李搜索框。样式2 {底色： # f00color:#fff} .李搜索框。样式3 {底色： # F90color:#fff} .身体的输入高度：30像素线高：30 px宽度宽度：390 pxpadding :0 10pxfloat : left }。身体。一个{ border:#000 3px固体}。身体。两个{ border:#f00 3px固体}。身体。三个{ border:#F90 3px固体}。身体。一个1 {底色： # 000；}.尸体。两个2 {底色： # f00}.body s . 3 {背景色： # F90}.身体按钮{ float:leftborder:0高度：36 px宽度宽度：100 pxcolor : # FFF；线高：36 px文本对齐：居中；飞越：隐藏；}/style/head dydiv class=' search box ' ul class=' border 1 ' lia href=' # ' class=' style 1 '宝贝/a/li lia href='# '天猫/a/li lia href='# '店铺/a/Li/ul div class=' body ' pinput type=' text ' value=' id=' class=' one ' placeholder='输入宝贝/button class='one1 '搜索/button/p pinput type=' text ' value=' id=' class=' two ' placeholder='输入宝贝/button class='two2 '搜索/button/p pinput type=' text ' value=' id=' class=' three ' placeholder='输入店铺/button class='three3 '搜索/button/p/div/div style=' text-align : center； 余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；/div/body/html以上就是为大家分享的jQuery实现的类似淘宝网站搜索框样式代码，希望大家可以喜欢。