Question

我有一个javascript，通过它可以动态更改列表的css类。

我的清单：

 <div class="BreadCrumbDiv">
            <ul id="breadcrumbs-two">
                <li><a href="#" onclick="changeClass(a1);" class="current1" id="a1">Step1
                    and user</a></li>
                <li><a href="#" onclick="changeClass('a1');" id="a2">Step2</a></li>
                <li><a href="#" onclick="changeClass('a1');" id="a3">Step3</a></li>
                <li><a href="#" onclick="changeClass('a1');" id="a4">Step4</a></li>

            </ul>
        </div>

Java脚本：

   function changeClass(elementid) {
        var lis = document.getElementById(elementid);
        lis.className = "current";
        lis.className = "current1";
    }

现在从我的按钮我正在调用这样的javascript

 <asp:button id="btnNextODCDetails" runat="server" text="Next" cssclass="Button" onclientclick="changeClass('a2');"/>

但是一旦回发发生，改变后的css样式就不起作用了。我不想使用更新面板。请有人帮助我。

先谢谢 Gulrej

Answer 1

当您回发数据时，将再次从aspx标记创建控制树。因此，无论您对客户端的html元素所做的更改都会丢失。

Answer 2

当页面完全发布并再次呈现时，您将丢失所有客户端代码（JS）更改。

如果您仍然需要，请以某种方式使用隐藏字段或其他内容保留信息，并在加载页面时检查相同信息并在客户端进行设置。

您可以使用

执行此客户端代码

jQuery：

 $(document).ready(function(){ // your checking});

JavaScript：DOMContentLoaded

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

IE：

object.addEventListener("DOMContentLoaded", handler, useCapture) //IE model

Answer 3

我得到了答案。我稍微改变了我的脚本。我点击了我的按钮事件就调用了脚本。

  string script = " $(document).ready(function () { $('#breadcrumbs-two li #a2').addClass('current');  $('#breadcrumbs-two li #a2').removeClass('current');  $('#breadcrumbs-two li #a2').addClass('current1');  });";
        ClientScript.RegisterClientScriptBlock(this.GetType(), "function", script, true);

Gulrej

Answer 4

在Page_Load之后在客户端使用此代码：它实际上对我有用。

ScriptManager.RegisterStartupScript(Me.Page, GetType(Page), String.Format("StartupScript"), "<script type=""text/javascript""> GetAttributeName(); </script>", False)

回发后失去css类

4 个答案: