jQuery实现的类似淘宝网站搜索框样式代码分享
运行效果图： ----------------------查看效果-----------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的类似淘宝网站搜索框样式代码如下
<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实现的类似淘宝网站搜索框样式代码，希望大家可以喜欢。
-
本文向大家介绍jQuery实现类似淘宝网图片放大效果的方法，包括了jQuery实现类似淘宝网图片放大效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jquery程序设计有所帮助。
-
本文向大家介绍jquery实现类似淘宝星星评分功能有截图，包括了jquery实现类似淘宝星星评分功能有截图的使用技巧和注意事项，需要的朋友参考一下 html id="p"显示即时分数 id="score"显示最终分数---------------------------------------------- javascript“ 出现的效果是这样的： 可惜的是你一点击下去--就不可更改了。真的是
-
本文向大家介绍JS仿淘宝搜索框用户输入事件的实现，包括了JS仿淘宝搜索框用户输入事件的实现的使用技巧和注意事项，需要的朋友参考一下 淘宝是我们经常用的一个网上购物平台，打开淘宝网首页，找到淘宝首页的搜索框，如下如所示： 大家可以看到，当页面一打开，搜索框中就可以看到灰色字体“少女高跟鞋”，还有闪烁的光标。当用户点击输入的时候，灰色字消失。当用户清空文本框的所有内容的时候，灰色字自动恢复。 接下来，
-
本文向大家介绍如何对淘宝搜索框进行测试相关面试题，主要包含被问及如何对淘宝搜索框进行测试时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 一, 功能测试 输入关键字，查看: 返回结果是否准确，返回的文本长度需限制 1.1输入可查到结果的正常关键字、词、语句，检索到的内容、链接正确性； 1.2输入不可查到结果的关键字、词、语句； 1.3输入一些特殊的内容，如空、特殊符、标点符、极限值等，可引入
-
本文向大家介绍JS实现淘宝支付宝网站的控制台菜单效果，包括了JS实现淘宝支付宝网站的控制台菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现淘宝支付宝网站的控制台菜单效果。分享给大家供大家参考。具体如下： 这是一款支付宝网站中的控制台总菜单，可实现动画效果的显示，漂亮美观，简洁实用，鼠标移到文字上，会滑出一个菜单层，移开后消失，也是当前较流行的菜单方式，很多朋友都挺喜欢的。
-
本文向大家介绍vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示），包括了vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）的使用技巧和注意事项，需要的朋友参考一下 完整效果演示 首先完成这个伪搜索框 src/components/search/index.vue （通用搜索框组件） src/assets/js/util.js 节流函数（防止请求数据时频率过快消耗性能）