javascript - 如何在 JavaScript 中使用 href

Question

我正在我的网络应用程序中创建一个搜索选项，我的代码如下

<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>

我有这个 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>

但我想要做的是，如果#txt-search为空或null或“”，div-search将不会显示。它不会做任何事。我尝试了 window.location 但这不是我想要的。

理想情况下，如果#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{
    }
});

Answer 1

你可以尝试这样的事情。请检查以下代码:

更改 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

$(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
    }

});