老师，请问为什么点击搜索按钮没有跳转到别的页面
来源：2-1 为搜索框添加功能--搜索验证
天青色烟雨蒙
2019-08-22 18:57:52
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 站点导航结束 -->
<!-- header区开始 -->
<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
<div class="search fl">
<form action="https://s.taobao.com/search" >
<input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off"
class="search-inputbox fl" />
<input type="submit" value="搜索" class="search-btn fl" />
</form>
<ul class="search-layer">
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
</ul>
</div>
<div class="cart dropdown fr"></div>
</div>
</div>
<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/index.js"></script>
</body>
</html>index.css
/*nav-site*/
.nav-site {
/*站点导航整体设置*/
width: 100%;
background-color: #f3f5f7;
}
.nav-site .container {
/*站点导航内容块整体设置*/
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login {
/*站点导航“亲，请登陆”设置*/
margin-left: 15px;
color: #f01414;
}
.nav-site-signup,
.nav-site-mobile {
/*站点导航“注册和手机购买”设置*/
margin-left: 10px;
}
.nav-site-category {
margin: 0 10px;
}
.nav-site-service {
margin-right: 15px;
}
/*下拉菜单样式dropdown*/
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow {
display: inline-block;
/*width:8px;
height:6px;*/
/*background: url(../img/dropdown-arrow.png) no-repeat;*/
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
top: 43px;
background-color: #fff;
z-index: 1;
border: 1px solid #cdd0d4;
}
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
right: 0;
left: auto;
}
.dropdown-item {
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.dropdown-item:hover {
background-color: #f3f5f7;
}
/*下拉菜单通过js和css来实现dropdown*/
/*.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
background-color:#fff;
border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
background-image:url(../img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
display:block;
}*/
/*header*/
.header {
width: 100%;
height: 145px;
background-color: #f3f5f7;
}
.header-logo,
.header .search,
.header .cart {
margin-top: 36px;
}
.header-logo {
display: block;
width: 136px;
height: 48px;
background: url("../img/header-logo.png") no-repeat;
margin-left: 15px;
}
.header .search {
margin-left: 145px;
}common.css
/*公共样式*/
.container {
/*站点导航*/
width: 1200px;
margin: 0 auto;
}
a.link {
/*链接正常颜色*/
color: #4d555d;
}
a.link:hover {
/*链接经过颜色*/
color: #f01414 !important;
}
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
.dropdown-arrow {
display: inline-block;
line-height: 1;
/*background-repeat: no-repeat;*/
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
right: 0;
left: auto;
}
.dropdown-loading{
width:32px;
height: 32px;
background: url(../img/loading.gif) no-repeat;
margin: 20px;
}
.text-hidden{
text-indent: -999px;
overflow: hidden;
}
.text-ellipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/*icon*/
@font-face {
font-family: "iconfont";
src: url('../test/font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
[class*="-active"] .dropdown-arrow {
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.transition {
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*showhide*/
.fadeOut {
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse {
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*.menu .dropdown*/
.menu .dropdown-toggle {
display: block;
height: 100%;
padding: 0 13px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow {
/*width: 8px;
height: 6px;
background-image: url(../img/dropdown-arrow.png);*/
margin-left: 5px;
}
.menu .dropdown-layer {
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item {
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.menu-item:hover {
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle {
background-color: #fff;
border-color: #cdd0d4;
}
.menu-active .dropdown-arrow {
/*background-image: url(../img/dropdown-arrow-active.png);*/
}
/*.menu-active .dropdown-layer {
display: block;
}*/
/*search*/
.search{
position: relative;
border: 1px solid #cfd2d5;
}
.search-inputbox{
width: 585px;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #fff;
border: 0;
}
.search-btn{
width: 73px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 14px;
cursor: pointer;
border: 0;
background-color: #07111b;
}
.search-layer{
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item{
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}
.search-layer-item:hover{
background-color: #f3f5f7;
}search.js
(function(){
'use strict';
var $search=$('.search'),
$input=$search.find('search-inputbox'),
$btn=$search.find('search-btn'),
$layer=$search.find('search-layer');
//验证
$btn.on('click',function(){
if($.trim($input.val())===''){
return false;
}
});
//自动完成
})(jQuery);
写回答
1回答
-
好帮手慕码
2019-08-22
同学你好！
请问你是问为什么做了if判断之后，搜索框什么都没有输入还是能跳转到别的页面是吗？是因为：
使用.来选中类名
如果帮助到了你， 欢迎采纳， 祝学习愉快~
0
相似问题
帮我看下为什么访问不了
回答 3
怎么像老师一样能打印出请求地址
回答 2