html - 根据按钮单击显示表格/图表

Question

我正在使用 MVC3，我有 2 个图标，一个用于网格，另一个用于图表，当我选择网格图标时，页面必须显示网格，而在选择图表时，页面应该显示图表。我使用以下 html 什么 jquery 代码我需要添加特定视图？

<li>Selected View
    <div class="selectView">
        <a href="#"></a><a href="#"></a>
    </div>
</li>

Answer 1

我在这里假设您在页面上预先呈现了网格和图表，并且两者都是隐藏的。此外，我假设您的网格有 class.grid并且您的图表有 class .chart。

你可以这样写：

$(document).ready(function(){

    var gridVisible = false,
        chartVisible = false;

    // I'm using the equals (eq) selector because your buttons have no classes
    // to identify them properly
    $(".selectView a:eq(0)").on("click", function() {
        if (gridVisible === false) {
            $(".grid").show();
            gridVisible = true;
        } else {
            $(".grid").hide();
            gridVisible = false;
        }
        return false;
    });

    $(".selectView a:eq(1)").on("click", function() {
        if (chartVisible === false) {
            $(".chart").show();
            chartVisible = true;
        } else {
            $(".chart").hide();
            chartVisible = false;
        }
        return false;
    });    
});

该按钮现在切换网格和图表的可见性。这意味着您可以使用相同的按钮显示和隐藏它。如果您正在设计，您可以在按钮上切换与设计相关的类。喜欢btn-show或btn-hide。然后在你的 CSS 样式中添加不同的颜色或图标。