如何将li类从活动更改为无

-2

当我单击选项卡配置文件，然后更改li类时，我无法将li类（主页）从“活动”更改为无（或其他类）配置文件）从配置文件激活时，从无到'有效'。如何将li类从活动更改为无

这里是我的代码：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <asp:PlaceHolder runat="server"> 
     <%-- Style Section --%> 
     <%: Styles.Render("~/bundles/Css") %> 
    </asp:PlaceHolder> 
    <script type="text/javascript"> 

     function openHome() { 

      location.href = "Home.aspx";    
     } 

     function openProfile() { 

      location.href = "Profile.aspx"; 
     } 

    </script> 
    <asp:ContentPlaceHolder ID="StyleSection" runat="server"> 
    </asp:ContentPlaceHolder> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    <br /> 
    <div class="container"> 
     <div class="jumbotron"> 
      <h1> 
       BANNER</h1> 
     </div> 
    </div> 
    <!-- MENU START --> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#home" data-toggle="tab" onclick="openHome();">Home</a></li> 
     <li><a href="#profile" data-toggle="tab" onclick="openProfile();">Profile</a></li> 
    </ul> 
    <div id="myTabContent" class="tab-content"> 
     <div class="tab-pane fade active in" id="home"> 
     </div> 
     <div class="tab-pane fade" id="profile"> 
     </div> 
    </div> 
    <%-- Script Section --%> 
    <%: Scripts.Render("~/bundles/jQuery") %> 
    <asp:ContentPlaceHolder ID="ContentSection" runat="server"> 
    </asp:ContentPlaceHolder> 
    <asp:ContentPlaceHolder ID="ScriptSection" runat="server"> 
    </asp:ContentPlaceHolder> 
    </form> 
</body> 
</html>

有人能帮助我吗？我尝试了类似的解决方案，我发现在stackoverflow但无法完成工作。非常感谢。

来源

2014-10-02 user1832038

请把你的jQuery代码放在这里。 – 2014-10-02 10:40:03

不是[标签：asp-classic]。 – Lankymart 2014-10-02 11:04:01

其实这个原始页面是一个.aspx页面。但是当我发布时，我删除了asp内容，因为我认为这与我的问题无关。 – user1832038 2014-10-02 11:10:33

HTML：

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab" onclick="openProfile();">Profile</a></li> 
</ul>

CSS：

.nav-tabs .active{background:#c00;}

JQ：

$(document).on('click', '.nav-tabs li', function(){ 
    if (!$(this).hasClass('active')){ 
     $('.nav-tabs li').removeClass('active'); 
     $(this).addClass('active') 
    } 
})

DEMO

来源

2014-10-02 10:42:49 Anon

我见过的小提琴是工作，但在我身边它不是“T。我使用的是IE8（因为我在工作atm）和便携版本的Mozilla。也许这是原因？

这是我的CSS代码。

.nav { 
    margin-bottom: 0; 
    padding-left: 0; 
    list-style: none; 
} 
.nav > li { 
    position: relative; 
    display: block; 
} 
.nav > li > a { 
    position: relative; 
    display: block; 
    padding: 10px 15px; 
} 
.nav > li > a:hover, 
.nav > li > a:focus { 
    text-decoration: none; 
    background-color: #dddddd; 
} 
.nav > li.disabled > a { 
    color: #808080; 
} 
.nav > li.disabled > a:hover, 
.nav > li.disabled > a:focus { 
    color: #808080; 
    text-decoration: none; 
    background-color: transparent; 
    cursor: not-allowed; 
} 
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus { 
    background-color: #dddddd; 
    border-color: #d9230f; 
} 
.nav .nav-divider { 
    height: 1px; 
    margin: 8px 0; 
    overflow: hidden; 
    background-color: #e5e5e5; 
} 
.nav > li > a > img { 
    max-width: none; 
} 
.nav-tabs { 
    border-bottom: 1px solid #dddddd; 
} 
.nav-tabs > li { 
    float: left; 
    margin-bottom: -1px; 
} 
.nav-tabs > li > a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid transparent; 
    border-radius: 4px 4px 0 0; 
} 
.nav-tabs > li > a:hover { 
    border-color: #dddddd #dddddd #dddddd; 
} 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 
    color: #777777; 
    background-color: #fcfcfc; 
    border: 1px solid #dddddd; 
    border-bottom-color: transparent; 
    cursor: default; 
} 

.nav-tabs.nav-justified { 
    width: 100%; 
    border-bottom: 0; 
} 
.nav-tabs.nav-justified > li { 
    float: none; 
} 
.nav-tabs.nav-justified > li > a { 
    text-align: center; 
    margin-bottom: 5px; 
} 
.nav-tabs.nav-justified > .dropdown .dropdown-menu { 
    top: auto; 
    left: auto; 
}

来源

2014-10-02 11:07:10 user1832038

如何将li类从活动更改为无

回答

相关问题