如何将 li 类从 active 更改为 none答案

【问题标题】：How to change li class from active to none如何将 li 类从 active 更改为 none
【发布时间】：2014-11-27 08:08:00
【问题描述】：

当我单击选项卡配置文件然后将（配置文件的）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 找到的类似解决方案，但无法完成工作。非常感谢。

【问题讨论】：

你能把你的jquery代码放在这里吗。
不是asp-classic。
其实这个原始页面是一个.aspx页面。但是当我发布时，我删除了 asp 内容，因为我认为它与我的问题无关。

标签： javascript c# jquery css asp.net

【解决方案1】：

我已经看到小提琴在工作，但在我这边却没有。我正在使用 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;
}

【讨论】：

【解决方案2】：

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

【讨论】：