Question

我正在研究MVC项目，在创建视图中，我只想在用户按下按钮时显示某些div。

我做了一些有用的东西。

Jquery的：

<script type="text/javascript">

    function toggle_div_fun(id) {

        var divelement = document.getElementById(id);

        if (divelement.style.display == 'none')
            divelement.style.display = 'block';
        else
            divelement.style.display = 'none';
    }

</script>

<script type="text/javascript">

    function toggle_div_fun2(id) {

        var divelement = document.getElementById(id);

        if (divelement.style.display == 'none')

            divelement.style.display = 'block';

        else
            divelement.style.display = 'none';
    }

</script>

HTML：

<button onclick="toggle_div_fun('Content');">Content</button>
<button onclick="toggle_div_fun2('Image');">Image</button>


        <div class="form-group", id="Content">
            @Html.LabelFor(model => model.ItemContent, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextArea("ItemContent", new { @class = "form-control", @placeholder = "De inhoud van het item content", rows = "6", cols = "20" })
                @Html.ValidationMessageFor(model => model.ItemContent, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group", id="Image">
            @Html.LabelFor(model => model.ItemContent, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CreateDate, new { htmlAttributes = new { @class = "form-control datepicker", type = "date", @placeholder = "Kies hier de foto" } })
                @Html.ValidationMessageFor(model => model.ItemContent, "", new { @class = "text-danger" })
            </div>
        </div>

这似乎有效。每次按下按钮，div都会消失。但是我想让它成为div，直到我按下一个按钮然后它才会显示div。

你们中的任何人请帮助我吗？

Answer 1

您可以使用CSS规则

设置初始显示状态

#Content, #Image { display:none; }

此外，函数toggle_div_fun2是冗余的，因为基于输入参数执行与toggle_div_fun相同的操作。所以删除其中一个。

Answer 2

您正在使用Jquery，因此您可以显示/隐藏控件。

    $("#Content").show();

    $("#Content").hide();

MVC创建视图Jquery显示和隐藏

2 个答案: