这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这是一款仿淘宝 TAB 切换搜索框,想搜索哪方面的内容就切换到哪一个,非常实用,喜欢的朋友可以看看
一款仿淘宝 TAB 切换搜索框,想搜索哪方面的内容就切换到哪一个,感兴趣的朋友可以看看下面的代码
- <div class="search">
- <div id="searchBox">
- <ul class="tab-bar clearfix" id="tabBar">
- <li class="current" tips="请输入产品名称">
- 商品
- </li>
- <li class="tab-line">
- <span>
- |
- </span>
- </li>
- <li tips="请输入店铺名称">
- 店铺
- </li>
- </ul>
- <div class="tab-box clearfix" id="tabBox">
- <form onsubmit="" action="" method="get" name="searchForm" id="searchForm"
- class="clearfix">
- <input class="text" id="keyword" name="keyword" lang="zh-CN" type="text"
- value="请输入产品名称">
- <input class="button" value="搜索" onfocus="this.blur()" type="submit">
- </form>
- </div>
- </div>
- <div class="keyword">
- <a href="#">
- <span>
- 男装
- </span>
- </a>
- <a href="#">
- 朵牧女鞋
- </a>
- <a href="#">
- 圣高男鞋
- </a>
- <a href="#">
- <span>
- 女装
- </span>
- </a>
- <a href="#">
- 防晒霜
- </a>
- <a href="#">
- 脱毛膏
- </a>
- </div>
- </div>
- .search {
- position: absolute;
- top: 14px;
- left: 34 % ;
- width: 477px;
- _width: 477px;
- height: 81px;
- }.keyword a {
- font - size: 12px;
- line - height: 18px;
- color: #999;
- padding: 0 4px;
- }.keyword a span {
- color: #fb5004;
- }.tab - bar li.current {
- color: #1d7ad9;
- font - weight: bold;
- background: url(.. / images / trian_up.png) no - repeat center bottom;
- padding - bottom: 9px;
- }.tab - bar li {
- width: 38px;
- text - align: center;
- color: #444;
- float: left;
- cursor: pointer;
- }.tab - bar li.tab - line {
- width: 2px;
- color: #c9c9c9;
- margin: 0 2px;
- }.tab - box {
- border: 2px solid#1d7ad9;
- }.text {
- color: #a9a9a9;
- width: 376px;
- height: 31px;
- border: none;
- text - indent: 10px;
- float: left;
- outline: none;
- border: 0;
- }.button {
- width: 97px;
- height: 32px;
- text - align: center;
- color: #fff;
- font - size: 18px;
- background: #1d7ad9;
- border: none;
- float: left;
- }
- <script type="text/javascript">
- $(function() {
- // 搜索切换
- $('#tabBar').on('click', 'li',
- function() {
- var tips = $(this).attr('tips');
- if (tips) {
- $(this).addClass('current').siblings().removeClass('current');
- $('#keyword').val(tips);
- }
- });
- </script>
来源: http://www.phperz.com/article/17/0719/274755.html