为什么我的脚本（更改 CSS 样式）在 UpdatePanel 中不起作用？答案

【问题标题】：Why my Script (to change css style) doesn't work inside UpdatePanel?为什么我的脚本（更改 CSS 样式）在 UpdatePanel 中不起作用？
【发布时间】：2017-10-23 05:45:47
【问题描述】：

我有一个UpdatePanel，里面有以下代码：

<asp:UpdatePanel ID="UpdatePanel4" runat="server">
  <ContentTemplate>

<nav class="navbar">  
  <ul class="nav nav-tabs nav-justified">
   <li class="item0"><a href="#" onserverclick="btnhoje" runat="server">Hoje</a></li>
   <li class="item1"><a href="#" onserverclick="btnserie" runat="server">Série</a></li>
   <li class="item2"><a href="#" onserverclick="btnutente" runat="server">Utente</a></li>
  </ul>
</nav>

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
  <asp:View ID="Tab1" runat="server">
...
  </asp:View>
  <asp:View ID="Tab2" runat="server">
...
  </asp:View>
  <asp:View ID="Tab3" runat="server">
...
  </asp:View>
</asp:MultiView>

  </ContentTemplate>
</asp:UpdatePanel>

PS：我正在使用Bootstrap，而我的UpdatePanel 在Modal 中。

这是我的Script：

<script>
  var CurrentView = <%= MultiView1.ActiveViewIndex %>;
  if (CurrentView == 0){
    $('a').closest('ul').find('.item0').addClass('active');
  }
  else if (CurrentView == 1){
    $('a').closest('ul').find('.item1').addClass('active');
  }
  else if (CurrentView == 2){
    $('a').closest('ul').find('.item2').addClass('active');
  };
</script>

所以我的问题是，当我打开 Modal UpdatePanel 更新时，我的 Script 没有做任何事情，当我在 Multiview 中更改 View 时，我想将 class "active" 添加到我的li 标签，但仅当我点击 item0、item1 或 item2 时，默认视图为 item0。

nav 内 UpdatePanel

nav外UpdatePanel

如果我没有说清楚，请随时问我。

编辑：

$('.teste-bar .nav li').on('click', 'body', function(){
  $('.teste-bar .nav li').removeClass('active');
  $(this).addClass('active');
});

【问题讨论】：

标签： javascript css asp.net bootstrap-modal updatepanel

【解决方案1】：

请试试这个

<div class="wrapper">

    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
    <ContentTemplate>

    <nav class="navbar test-bar">  
        <ul class="nav nav-tabs nav-justified">
            <li class="item0 active"><a href="#" onserverclick="btnhoje" runat="server">Hoje</a></li>
            <li class="item1"><a href="#" onserverclick="btnserie" runat="server">Série</a></li>
            <li class="item2"><a href="#" onserverclick="btnutente" runat="server">Utente</a></li>
        </ul>
    </nav>

    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
    <asp:View ID="Tab1" runat="server">
    ...
    </asp:View>
    <asp:View ID="Tab2" runat="server">
    ...
    </asp:View>
    <asp:View ID="Tab3" runat="server">
    ...
    </asp:View>
    </asp:MultiView>

    </ContentTemplate>
    </asp:UpdatePanel>

</div>


**JQuery**
$( function() { // Document Ready
    $('.test-bar .nav li').on('click', '.wrapper', function(){
        $('.test-bar .nav li').removeClass('active'); // Corrected Line
        $(this).addClass('active');
    });
});

【讨论】：

这不是我的问题。我的脚本可以工作，但是当我单击 item0 时，UpdatePanel 更新并清除类“活动”@Legues
现在我明白了你的问题。试试我在这里为你创建的代码。 :)
在函数（）中它说预期的'）'
什么都不做。它应该做什么？
将活动类添加到单击的 li 元素。当然，您必须将 .parent-update-panel 类重命名为您的代码...例如选择 updatePanel 上方的主体或其他元素。

【解决方案2】：

以下代码为 HTML：

<nav class="navbar">  
    <ul class="nav nav-tabs nav-justified">
        <li id="item0" class="active"><a href="#" onclick="view('MainContent_UpdatePanel4', 'MainContent_HiddenField2', '0', 'MainContent_Button1')">Hoje</a></li>
        <li id="item1"><a href="#" onclick="view('MainContent_UpdatePanel4', 'MainContent_HiddenField2', '1', 'MainContent_Button1')">Série</a></li>
        <li id="item2"><a href="#" onclick="view('MainContent_UpdatePanel4', 'MainContent_HiddenField2', '2', 'MainContent_Button1')">Utente</a></li>
    </ul>
</nav>
<asp:HiddenField ID="HiddenField2" runat="server" />

    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
      <ContentTemplate>

    <asp:Button ID="Button1" CssClass="hidden" runat="server" OnClick="btnViews" />

    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
      <asp:View ID="Tab1" runat="server">
    ...
      </asp:View>
      <asp:View ID="Tab2" runat="server">
    ...
      </asp:View>
      <asp:View ID="Tab3" runat="server">
    ...
      </asp:View>
    </asp:MultiView>

      </ContentTemplate>
    </asp:UpdatePanel>

我的脚本：

<script>
    function view(servercontrolid, indexcontrolid, index, controlclick) {

        var up = document.getElementById(servercontrolid);
        var control = document.getElementById(controlclick);

        if (up) {
            document.getElementById(indexcontrolid).value = index;
            control.click();
        }

        if (index == 0) {
            $('a').closest('ul').find('.active').removeClass('active');
            $('a').closest('nav').find('#item0').addClass('active');
        } else if (index == 1) {
            $('a').closest('ul').find('.active').removeClass('active');
            $('a').closest('nav').find('#item1').addClass('active');
        } else if (index == 2) {
            $('a').closest('ul').find('.active').removeClass('active');
            $('a').closest('nav').find('#item2').addClass('active');
        }
    }

</script>

【讨论】：