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内。

这是我的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 Multiview时我想将class "active"添加到我的li代码中，但仅当我点击item0，item1或item2并且默认视图为item0时

nav内{p> 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内部不起作用？

2 个答案: