Javascript 如何显示和隐藏不同的<；第节>；我的html页面是否使用jquery？

我在结果页面上有两个部分，一个显示结果表，另一个显示基于结果的各种图表，它们位于

标记中，默认显示的是表格：

当单击relitive按钮时，我如何使用jquery隐藏此部分并显示图表部分：

<div class="btn-group">
    <button type="button" id="table" class="btn btn-primary">Table</button>
    <button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>

但我不知道如何添加第二个按钮，也不知道如何切换我的视图：）

第二，是否有人可以推荐任何好的javascript/jquery教程

*****HTML页面***** 此页面正在作为子视图从我的控制器：搜索/执行搜索加载

    <section class="results_head">
    <div class="row">
        <div class="col-md-12"><!--<?php if(empty($chart)){echo "EMPTY" . '<br />';} else{ print_r($chart);} ?>--></div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 btn_down"><a href="#bottom"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down" /> Bottom <span class="glyphicon glyphicon-arrow-down" /></button></a></div>
        <div class="col-md-4"><input type="hidden" id="chartData" value='<?php echo $chart; ?>' /></div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="results_count">
                <h3><strong>Your Search:</strong></h3>
                <p>Results Table: <font class="text-primary"><strong><?php if($_POST['tbl'] === 'p_results'){echo "New Table";} else{echo "Old Table"; } ?></strong></font></p>
                <p class="cat">Catogory: <font class="text-primary"><strong><?php if($_POST['col'] === 'code'){echo "test";} else{echo str_replace('_', ' ', $_POST["col"]);} ?></strong></font></p>
                <p><?php
                    if($_POST['col'] == 'result' && $_POST['res'] == NULL){echo 'Showing ' . '<font class="text-primary">' . '<strong>' . "ALL" . '</strong>' . '</font>' . ' results';}
                    elseif ($_POST['col'] == 'result'){echo 'Showing all results for: ' . '<font class="text-primary">' . '<strong>' . $_POST["res"] . '</strong>' . '</font>';}
                    else{;} ?>
                </p>
                <p style="text-transform: capitalize;"><?php if($_POST['res']){echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . $_POST['res'] . ' Results' . '</strong>' . '</font>';} else{echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . "All Results" . '</strong>' . '</font>';} ?></p>
                <p><?php if($_POST['sdate'] && $_POST['edate']){echo 'Within Date Ranges: ' . '<font class="text-primary">' . '<strong>' . $_POST['sdate'] . '</strong>' . '</font>' . ' and ' . '<font class="text-primary">' . '<strong>' . $_POST['edate'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No Date Range was specified" . "</strong>" . "</font>";} ?></p>
                <p><?php if($_POST['terms']){echo 'With the following keywords: ' . '<font class="text-primary">' . '<strong>' . $_POST['terms'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No keywords were specified" . "</strong>" . "</font>";} ?></p>
                <hr />
                <p><?php echo "Your Search Returned" . " " . '<strong>' .'<font class="text-primary">' . count($results) . '</font>' . '</strong>' .  " " . "Results, " .
                        "out of " . '<strong>' . '<font class="text-primary">' . count($totals) . '</font>' . '</strong>' . " records."?></p>
            </div>
        </div>
        <?php if(empty($chart)){echo "<div class='col-md-4'>" . "</div>";} else{echo "<div class='col-md-4 chart' id='donut'>" . "</div>";} ?>
        <div class='col-md-4'></div>
    </div>
    <div class="row">
        <div class="col-md-12  select_menu">
            <div class="btn-group">
               <button type="button" id="table" class="btn btn-primary">Table</button>
                <button type="button" id="chart" class="btn btn-primary">Charts</button>
            </div>
        </div>
    </div>
</section>
<section class="results_table" style="display: inline">
    <div class="row tbl_row">
        <div class="col-md-12">
            <table class="tbl_results">
                <thead>
                    <tr>
                        <th><?php if($results){echo implode('</th><th>', array_keys(current($results))); } elseif($_POST['terms']){echo "No Results were found to match: " . $_POST['terms']; }else {echo "No Results Found"; } ?></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <?php foreach ($results as $row): array_map('htmlentities', $row); ?>
                    <tr>
                        <td><?php echo implode('</td><td>', $row); ?></td>
                    </tr>
                        <?php endforeach; ?>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="top_btn">
                <a href="#top"><button type="button" class="btn btn-primary">
    <span class="glyphicon glyphicon-arrow-up"></span> Back to Top <span 
    class="glyphicon glyphicon-arrow-up"></span></button></a>
                <a name="bottom">
            </div>
        </div>
        <div class="col-md-8"></div>
    </div>
</section>
<section class="results_charts" style="display: none">
    <div class="row">
        <div class="col-md-12 chart2" id="bar"></div>
    </div>
    <div class="row">
        <div class="col-md-12 chart2" id="line"></div>
    </div>
    <div class="row">
        <div class="col-md-12 chart2" id="area"></div>
    </div>
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</section>

Catogory:



您需要执行以下操作：-

$(document).ready(function(){
  $("#table, #chart").on("click",function(e){
    $(".results_table, .results_charts").toggle();
  });
});

示例：-


$（文档）.ready（函数（）{
$（“#表格，#图表”）。在（“单击”，函数（e）{
$（“.results\u table、.results\u charts”）.toggle（）；
});
});

结果表
结果图表
桌子
图表
您需要执行以下操作：-

$(document).ready(function(){
  $("#table, #chart").on("click",function(e){
    $(".results_table, .results_charts").toggle();
  });
});

示例：-


$（文档）.ready（函数（）{
$（“#表格，#图表”）。在（“单击”，函数（e）{
$（“.results\u table、.results\u charts”）.toggle（）；
});
});

结果表
结果图表
桌子
图表
此解决方案允许您轻松添加更多节和相应按钮。只需设置要显示为按钮属性的部分

我还添加了一个活动类，因此很明显用户正在发生什么


$（函数（）{
$（'.toggle button'）.first（）.addClass（'active'）；//将活动样式添加到第一个按钮
$（'.toggle content'）。不是（':first'）.hide（）；//保持第一节显示，但隐藏其他部分
$（'.toggle button'）。打开（'单击'，函数（）{
$（'.toggle content'）.hide（）；//隐藏所有部分
$（'.toggle button'）.removeClass（'active'）；//将所有按钮标记为非活动
var-toggleElementId=$（this.attr（'data-toggle'）；//从数据属性获取ID
$（toggleElementId）.show（）；//显示正确的节
$（this）.addClass（'active'）；//激活当前按钮
});
});
.active{
背景色：#f0f；
}

桌子
图表
一些东西
其他一些功能
此解决方案将允许您轻松添加更多的节和相应的按钮。只需设置要显示为按钮属性的部分

我还添加了一个活动类，因此很明显用户正在发生什么


$（函数（）{
$（'.toggle button'）.first（）.addClass（'active'）；//将活动样式添加到第一个按钮
$（'.toggle content'）。不是（':first'）.hide（）；//保持第一节显示，但隐藏其他部分
$（'.toggle button'）。打开（'单击'，函数（）{
$（'.toggle content'）.hide（）；//隐藏所有部分
$（'.toggle button'）.removeClass（'active'）；//将所有按钮标记为非活动
var-toggleElementId=$（this.attr（'data-toggle'）；//从数据属性获取ID
$（toggleElementId）.show（）；//显示正确的节
$（this）.addClass（'active'）；//激活当前按钮
});
});
.active{
背景色：#f0f；
}

桌子
图表
一些东西
其他一些东西
用这个来显示图表部分

$("#chart").on("click", function(){
  $("#results_table").hide();
  $("#results_charts").show();  
});

使用此选项仅显示结果

$("#table").on("click", function(){
  $("#results_charts").hide();  
  $("#results_table").show();
});

使用此选项显示图表部分

$("#chart").on("click", function(){
  $("#results_table").hide();
  $("#results_charts").show();  
});

使用此选项仅显示结果

$("#table").on("click", function(){
  $("#results_charts").hide();  
  $("#results_table").show();
});

在一个按钮上添加一个单击侦听器，该按钮调用一个函数，该函数可更改分区的显示值，将table更改为display:none，并将chart更改为所需的显示值（“”作为显示值，取默认值）@Sam以清晰显示。如果单击“图表”，则希望它显示图表，如果单击“表格”，则希望它显示表格？如果我连续多次单击表格或图表，会发生什么情况？在一个按钮上添加一个单击侦听器，该按钮调用一个函数，该函数可更改分区的显示值，将table更改为display:none，并将chart更改为所需的显示值（“”作为显示值，取默认值）@Sam以清晰显示。如果单击“图表”，则希望它显示图表，如果单击“表格”，则希望它显示表格？如果我连续多次单击“表”或“图表”，会发生什么情况？感谢您的快速回复，代码可以工作，但仅部分工作，当我单击其中一个按钮时，表部分隐藏并显示，但图表部分仍然隐藏，有什么想法吗？@Sam check it's working:-或（我删除了php变量以干净的方式显示）@Sam你检查过了吗？谢谢你的快速回复，代码可以正常工作，但只是部分工作，当我点击其中一个按钮时，表格部分被隐藏并显示，但图表部分仍然隐藏，有什么想法吗？@Sam check它正在工作：-或者（我删除了php变量以清晰的方式显示）@Sam你检查过了吗？谢谢，这对我不起作用，但是，它隐藏了我的子视图的全部内容，所以我尝试删除代码的第二行，但其余的都不起作用。我喜欢为按钮使用活动背景的想法，很好touch@Sam如果页面上有其他
部分
元素，则需要选择特定的元素。我已将答案更新为仅影响切换内容部分。干杯！我添加了我的html页面，该页面正在我的question@Sam如果您添加类和ID，您将有一个灵活的解决方案可在应用程序的其他地方使用。基于类的可重用代码。添加了类和ID，但仍然没有。谢谢，这对我不起作用。但是，它隐藏了子视图的全部内容，所以我尝试删除代码的第二行，但其余的都不起作用。我喜欢为按钮使用活动背景的想法，很好touch@Sam如果页面上有其他
部分
元素，则需要选择特定的元素。我已经更新了我的答案