Question

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

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

Answer 1

我在这里假设您在页面上预先渲染了网格和图表，并且两者都被隐藏了。此外，我假设您的网格具有类.grid，并且您的图表具有类.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样式中添加不同的颜色或图标。

显示基于按钮单击的网格/图表

1 个答案: