[英]How to use href in javascript
I am making a search option in my web application which I code like this 我在我的Web应用程序中选择了搜索选项,我将其编码为这样
<div class="form-group form-group-search" style="margin-top:1.5em;">
<div class="input-group" style="width:92%; margin:auto">
<input id="txt-search" type="text" class="form-control" placeholder="Search Keyword..." />
<span class="input-group-btn">
<a class="btn btn-default" id ="btn-search" data-toggle="tab" href="#div-search">
<span class="fa fa-search"></span></a>
</span>
</div>
</div>
and I have this div that displays depends on the href
of a link 而且我有这个div显示取决于链接的href
<div id="div-search" class="tab-pane fade">
<section class="content-header">
<h1><i class="fa fa-search"></i><span style="margin-left:.3em;">Result</span>
</h1>
</section>
<section class="content container-fluid">
<div class="col-sm-3">
<span> search </span>
</div>
</section>
</div>
<div id="div-home" class="tab-pane fade">
<section class="content-header">
<h1><i class="fa fa-home"></i><span style="margin-left:.2em;">Home</span>
</h1>
</section>
<section class="content container-fluid">
<div class="row">
<div class="col-sm-12" style="text-align:center;">
<div style="border-top:2px solid #555555; width:70%; margin:auto;"></div>
</div>
</div>
<div class="row" style="margin-top:1em;">
<div class="col-sm-12" style="text-align:center;">
Description
</div>
</div>
</section>
</div>
but what I want to do is if the #txt-search
is empty or null or "" the div-search
will not display. 但是我想做的是如果#txt-search
为空或为null或“”,则div-search
将不会显示。 And it will do nothing. 而且它什么也不会做。 I tried window.location
but it's not what i want. 我尝试了window.location
但这不是我想要的。
Ideally if #txt-search
is not equal to "" it will do nothing. 理想情况下,如果#txt-search
不等于“”,则将不执行任何操作。
$(document).on("click", "#btn-search", function () {
if ($("#txt-search").val() != ""){
$(".sidebar-menu > li").removeClass("active");
$(".sidebar-menu > li:nth-child(4)").removeClass("menu-open");
$(".treeview-menu").slideUp();
}
else{
}
});
You can do something like this. 你可以做这样的事情。 Using hide()
and show()
function 使用hide()
和show()
函数
$(function(){
$('#btn-search').click(function(){
var input = $('#txt-search').val();
if(typeof input === 'undefined' || input == null || input == ''){
$('#div-search').hide();
} else {
$('#div-search').show();
// You want...
}
})
});
You can hide and show div with hide()
and show()
in Jquery 您可以在Jquery中使用hide()
和show()
隐藏和显示div
$('#btn-search').click(function(){
if($("#txt-search").val() !== ""){
$('#div-search').hide();
} else {
$('#div-search').show()
}
});
You can try something like this. 您可以尝试这样。 Please check below code: 请检查以下代码:
Change HTML
变更HTML
<div class="form-group form-group-search" style="margin-top:1.5em;">
<div class="input-group" style="width:92%; margin:auto">
<input id="txt-search" type="text" class="form-control" placeholder="Search Keyword..." />
<span class="input-group-btn">
<a class="btn btn-default" id ="btn-search" data-toggle="tab" href="javascript:void(0)">
<span class="fa fa-search"></span></a>
</span>
</div>
</div>
jQuery jQuery的
$(document).on("click", "#btn-search", function () {
if ($("#txt-search").val() == "")
{
console.log('working');
} else{
$('#div-search').show();
//$('#div-search').addClass('in'); //if you use bootstrap
//write your code
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.