如何將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類從活動更改爲無

回答

相關問題