javascript - 显示隐藏不适用于选项卡

Question

我正在尝试创建具有选项卡式功能的搜索功能。目前显示良好。完全没有错误。问题是当我想单击任何选项卡时，它需要显示/隐藏其他选项卡的一些内容。 每当我单击任何 div 时，它都会显示 div 内容，但不会隐藏或显示任何内容。

 <div id="newsearchs" class="row">
        <div class="row">
            <div class="col-xs-12">
                <ul id="myTab" class="nav# nav-tabs test">
                    <li class="active"><a href="#" id="pep">People</a>

                    </li>

                <li><a href="#" name = "job" id="job">Jobs</a>

                </li>
                <li><a href="#" id="loca" name = "loca">Location</a>

                </li>

            </ul>
        </div>
    </div>
    <div class="col-xs-12">
        <div class="input-group input-group-md">
            <input type="text" id= "search_value" class="form-control " placeholder="Search for ...">
            <input name="search_location" id="search_location" placeholder="Location" class="form-control txt-auto"/>

            <div id="people" class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Looking For <span class="caret"></span>

                </button>
                <ul class="navbar-custom-menu dropdown-menu pull-right">
                    <li><a href="#">Student</a>

                    </li>
                    <li><a href="#">Teacher</a>

                    </li>
                    <li><a href="#">Institue</a>

                    </li>
                 </ul>
            </div>
            <div id="jobs" class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>

                </button>
                <ul class="navbar-custom-menu dropdown-menu pull-right">
                    <li><a href="#">Brief format</a>

                    </li>
                    <li><a href="#">Detailed format</a>

                    </li>
                    <li><a href="#">Citesummary</a>

                    </li>
                    <li><a href="#">LaTeX (EU)</a>

                    </li>
                </ul>
            </div>
            <div id="locations" class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>

                </button>
                <ul class="navbar-custom-menu dropdown-menu pull-right">
                    <li><a href="#">Brief format</a>

                    </li>
                    <li><a href="#">Detailed format</a>

                    </li>
                    <li><a href="#">Citesummary</a>

                    </li>
                    <li><a href="#">LaTeX (EU)</a>

                    </li>
                </ul>
            </div>
            <!-- /btn-group --> <span class="input-group-btn">
        <button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search"></span>

            </button>
            </span>
        </div>

这是目前无法运行的 jquery 代码。

<script type="text/javascript">
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();

$('#myTab a').click(function (e) {
    e.preventDefault();
    if (!($(this).attr('id') == 'pep')) {
         $('#search_location').hide();
        $('#search_value').show();
        $('#people').show();
        $('#jobs').hide();
        $('#locations').hide();
    }
    $(this).tab('show');
})
</script>

<script type="text/javascript">
$('#myTab b').click(function (e) {
    e.preventDefault();
    if (!($(this).attr('id') == 'job')) {
         $('#search_location').hide();
        $('#search_value').show();
        $('#jobs').show();
        $('#people').hide();
        $('#locations').hide();
    }
    $(this).tab('show');
})
</script>

<script type="text/javascript">
$('#myTab c').click(function (e) {

    e.preventDefault();
    if (!($(this).attr('id') == 'loca')) {
         alert('Hi');
        $('#search_location').show();
        $('#search_value').hide();
        $('#locations').show();
        $('#jobs').hide();
        $('#people').hide();
  //  }
    $(this).tab('show');

})
</script>

据我所知 $('#myTab c').click(function (e) { 没有触发。请告诉我我做错了什么。

Answer 1

您有许多 HTML 和 JS 格式问题。

1. 您已注释掉结尾 {在第三个选项卡显示调用之前，即。 // } ，您需要取消注释

2. 您指的是不存在的 html 元素。 #myTab b和#myTab c正在尝试寻找标签 <b> 的 html 元素和<c> ，但您尝试将处理程序附加到 <a>标签，在这种情况下，您可以组合很多代码

3. 您的 if 语句似乎正在寻找 id 的时间。不等于某事，这意味着每次选项卡更改都会触发 2 批显示/隐藏，这些应该简化为(最好是 switch 语句)单独处理每个选项卡的点击事件

4. 您有多个未关闭的<div>标签和流浪者 #在你的 myTab 的类定义中元素。

<强> JSFIDDLE

JS

$(function() {
    $('#jobs').hide();
    $('#locations').hide();
    $('#search_location').hide();

    $('#myTab a').click(function(e) {
        e.preventDefault();
        if (($(this).attr('id') == 'pep')) {
            $('#search_location').hide();
            $('#search_value').show();
            $('#people').show();
            $('#jobs').hide();
            $('#locations').hide();
        }
        if (($(this).attr('id') == 'job')) {
            $('#search_location').hide();
            $('#search_value').show();
            $('#jobs').show();
            $('#people').hide();
            $('#locations').hide();
        }
        if (($(this).attr('id') == 'loca')) {
            $('#search_location').show();
            $('#search_value').hide();
            $('#locations').show();
            $('#jobs').hide();
            $('#people').hide();
        }
        $(this).tab('show');
    })
})