javascript - 如何使用 jquery 显示和隐藏 html 页面的不同 <section>？

Question

我在结果页面上有 2 个部分，一个显示结果表，一个显示基于结果的各种图表，它们在 <section> 中标签，默认显示的是表格:<section class="results_table" style="display: inline">我如何使用 jquery 隐藏它并显示图表部分:<section class="results_charts" style="display: none">单击相关按钮时

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

我目前正在尝试这个我在类似的问题中发现:

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

但我不知道如何添加第二个按钮，也不会切换我的 View :)

其次，是否有人可以推荐任何好的 javascript/jquery 教程？

***** HTML 页面 ***** 此页面作为 subview 从我的 Controller 加载:Search/execute_search

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

Answer 1

用它来显示图表部分

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

使用这个只显示结果

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