jQuery实现的类似淘宝网站搜索框样式代码分享

前端技术 2023/09/04 JavaScript

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

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

<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>淘宝网选项卡类型搜索框样式代码</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实现的类似淘宝网站搜索框样式代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/9262

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案