Question

I currently am trying to change the style of my page on the push of a button - the button is part of a dropdown. Everything I try does not seem to work, here is what I'm trying:

<a href="#" onclick="@Url.Action("~Views/Customer/css/Hide.css")">Lead</a></li>

Answer 1

有两个<link />标签定义如下：

<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="onclick.css" disabled id="onclick" />
<link rel="stylesheet" href="offclick.css" disabled id="offclick" />

使用jQuery，您可以轻松地将控件提供给以下HTML：

<a href="#" id="style-change">Change Style</a>

$(function () {
    $("#style-change").click(function () {
        if ($("#onclick").prop("disabled")) {
            $("#onclick").prop("disabled", false);
            $("#offclick").prop("disabled", true);
        } else {
            $("#onclick").prop("disabled", true);
            $("#offclick").prop("disabled", false);
        }
    });
});

希望这有帮助。

Answer 2

如果您愿意使用JQuery，可以在一行内完成：

$("head").append("<link rel='stylesheet' id='extracss' href='"~Views/Customer/css/Hide.css"' type='text/css' />");

Answer 3

首先，这行代码看起来很吓人！

<a href="#" onclick="@Url.Action("~Views/Customer/css/Hide.css")">Lead</a></li>

如果要更改特定容器的样式？或者更改整个样式表？

如果以后是这种情况，那么您需要在某处保存当前样式表值，可能在ViewBag中甚至是Session。然后检查你在布局中包含什么内容，就行了......

@if(ViewBag.Style == "red")
{
  Styles.Render("~Views/Customer/css/Hide.css");
}
else if(ViewBag.Style == "blue")
{
  // you get the idea...
}

使用<a> to trigger a change in style

3 个答案: