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格式问题。

您在第三个标签显示调用之前注释了结束{，即。 // }，您需要取消注释
您指的是不存在的html元素。 #myTab b和#myTab c正在尝试查找标记<b>和<c>的html元素，但您尝试将处理程序附加到<a>标记，在哪种情况下，您可以结合很多代码
当id不等于某事时，你的if语句似乎正在寻找，这意味着每个标签更改会触发2次显示/隐藏，这些应简化为（理想情况下，switch语句）单独处理每个标签的点击事件
您的<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');
    })
})

show hide无法使用tab

1 个答案: