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

Question

我有一个 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.[=36= 中]

这是我的 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 没有做任何事情，当我更改 View 时23=] 我想将 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');
});

Answer 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');
    });
});

Answer 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>

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

Why my Script (to change css style) doesn't work inside UpdatePanel?

javascript

css

asp.net

bootstrap-modal

updatepanel