運(yùn)行效果圖： ----------------------查看效果-----------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的類似淘寶網(wǎng)站搜索框樣式代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>淘寶網(wǎng)選項(xiàng)卡類型搜索框樣式代碼</title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){ $(".bodys p").not(":first").hide(); $(".searchbox ul li").mouseover(function(){ var index = $(this).index(); if(index==0){ $(this).find("a").addClass("style1"); $("li").eq(1).find("a").removeClass("style2"); $("li").eq(2).find("a").removeClass("style3"); } if(index==1){ $(this).find("a").addClass("style2"); $("li").eq(0).find("a").removeClass("style1"); $("li").eq(2).find("a").removeClass("style3"); } if(index==2){ $(this).find("a").addClass("style3"); $("li").eq(0).find("a").removeClass("style1"); $("li").eq(1).find("a").removeClass("style2"); } var index=$(this).index(); $(".bodys p").eq(index).show().siblings().hide(); });});</script><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}/* searchbox */.searchbox{width:520px;height:80px;margin:40px auto 0 auto;}.searchbox ul{ height:35px; width:500px; list-style:none; margin-left:20px}.searchbox ul li{ float:left}.searchbox ul li a{ float:left; line-height:35px; padding:0 20px; text-decoration:none; color:#000; font-size:14px; font-weight:bold;}.searchbox ul li .style1{ background-color:#000; color:#fff}.searchbox ul li .style2{ background-color:#f00;color:#fff}.searchbox ul li .style3{ background-color:#F90;color:#fff}.bodys input{ height:30px;line-height:30px;width:390px;padding:0 10px;float:left;}.bodys .one{ border:#000 3px solid}.bodys .two{ border:#f00 3px solid}.bodys .three{ border:#F90 3px solid}.bodys .one1{ background-color:#000; }.bodys .two2{ background-color:#f00;}.bodys .three3{ background-color:#F90;}.bodys button{float:left;border:0;height:36px;width:100px; color:#FFF; line-height:36px;text-align:center;overflow:hidden;}</style></head><body><div class="searchbox"> <ul class="border1"> <li><a href="#" class="style1">寶貝</a></li> <li><a href="#">天貓</a></li> <li><a href="#">店鋪</a></li> </ul> <div class="bodys"> <p><input type="text" value="" id="" class="one" placeholder="輸入寶貝" /><button class="one1">搜索</button></p> <p><input type="text" value="" id="" class="two" placeholder="輸入寶貝" /><button class="two2">搜索</button></p> <p><input type="text" value="" id="" class="three" placeholder="輸入店鋪" /><button class="three3">搜索</button></p> </div></div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>以上就是為大家分享的jQuery實(shí)現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼，希望大家可以喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
