Javascript 显示隐藏不使用选项卡

我正在尝试创建一个带有选项卡功能的搜索函数。现在天气很好。完全没有错误。 问题是当我想点击任何标签时，它需要显示/隐藏其他标签的一些内容。 每当我点击任何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>

$（“#作业”）.hide（）；
$（“#位置”）.hide（）；
$（“#搜索_位置”）.hide（）；
$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
如果（！（$（this.attr（'id'）=='pep'））{
$（“#搜索_位置”）.hide（）；
$（“#搜索_值”）.show（）；
$（“#人”）.show（）；
$（“#作业”）.hide（）；
$（“#位置”）.hide（）；
}
$（this.tab（'show'）；
})
$（“#myTab b”）。单击（函数（e）{
e、 预防默认值（）；
if（！（$（this.attr（'id'）=='job'））{
$（“#搜索_位置”）.hide（）；
$（“#搜索_值”）.show（）；
$（“#作业”）.show（）；
$（“#人”）.hide（）；
$（“#位置”）.hide（）；
}
$（this.tab（'show'）；
})
$（“#myTab c”）。单击（函数（e）{
e、 预防默认值（）；
如果（！（$（this.attr（'id'）=='loca'））{
警报（“Hi”）；
$（“#搜索_位置”）.show（）；
$（“#搜索_值”）.hide（）；
$（“#位置”）.show（）；
$（“#作业”）.hide（）；
$（“#人”）.hide（）；
//  }
$（this.tab（'show'）；
})

根据我的

$（'#myTab c'）。单击（函数（e）{

未触发。

---

请告知我做错了什么。

您有许多HTML和JS格式问题

在第三个tab show调用（即，

/}

）之前，您已经注释掉了一个结束

{

，您需要取消注释

您指的是不存在的html元素。

#myTab b

和

#myTab c

试图查找标记

和

的html元素，但您试图将处理程序附加到

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');
    })
})

您有许多HTML和JS格式问题

在第三个tab show调用（即，
/}
）之前，您已经注释掉了一个结束
{
，您需要取消注释

您指的是不存在的html元素。
#myTab b
和
#myTab c
试图查找标记
和
的html元素，但您试图将处理程序附加到

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');
    })
})

你一定是在开玩笑吧？没有像
click
try with all click function
$（“#myTab a”）
这样的标签是带有
标签的
目标，而
tab（'show'）
不是定义好的功能你一定是在开玩笑吧？没有像
click
try with all click function
$（“#myTab a”）这样的标签
是带有
标记的
目标，而
选项卡（'show'）
不是定义的功能