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

时间：2017-08-18 15:04:21

标签： javascript jquery html css html5

我在结果页面上有2个部分，一个显示结果表，另一个显示基于结果的各种图表，你在<section>标签中，显示的默认值是表格：<section class="results_table" style="display: inline">如何使用jquery隐藏它并在单击relitive按钮时显示图表部分：<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();
});

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

其次，如果有人可以推荐任何好的javascript / jquery教程吗？

***** HTML PAGE ***** 此页面作为我的控制器的子视图加载：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>

3 个答案:

答案 0 :(得分：2)

您需要执行以下操作： - 

const activeModal = this.modalService.open(ModalComponent, { size: 'lg' });
activeModal.componentInstance.modalHeader = 'Create company';
activeModal.componentInstance.modalContent = 'company form';

<强> 实施例： - 

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

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

或没有<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="results_table" style="display: inline">Results Table</section> <section class="results_charts" style="display: none">Results Charts</section> <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>如下所示： - 

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

使用您更新的HTML工作： - https://jsfiddle.net/42ahxqu3/ 或 https://jsfiddle.net/svL8ugzr/ （我删除了php变量以便以干净的方式向您展示）

答案 1 :(得分：2)

使用此选项显示图表部分

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

使用此节目仅显示结果

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

答案 2 :(得分：0)

此解决方案可让您轻松添加更多部分和相应按钮。只需将要显示的部分设置为按钮的属性即可。

我还添加了一个活跃的课程，因此很明显该用户正在发生什么。

＆＃13;
＆＃13; 
$(function() {
  $('.toggle-button').first().addClass('active'); // ADD ACTIVE STYLE TO FIRST BUTTON
  $('.toggle-content').not(':first').hide(); // KEEP THE FIRST SECTION SHOWING BUT HIDE OTHERS
  $('.toggle-button').on('click', function() {
    $('.toggle-content').hide(); // HIDE ALL SECTIONS
    $('.toggle-button').removeClass('active'); // MARK ALL BUTTONS INACTIVE
    var toggleElementId = $(this).attr('data-toggle'); // GET ID FROM DATA ATTRIBUTE
    $(toggleElementId).show(); // SHOW CORRECT SECTION
    $(this).addClass('active'); // MAKE CURRENT BUTTON ACTIVE
  });
});
＆＃13; 
.active {
    background-color: #f0f;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
    <button data-toggle="#table" class="toggle-button btn btn-primary">Table</button>
    <button data-toggle="#charts" class="toggle-button btn btn-primary">Charts</button>
</div>
<section class="toggle-content" id="table">Some stuff</section>
<section class="toggle-content" id="charts">Some other stuff</section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题