Question

如何将导航栏更改为活动状态？它不适用于：活动！我用jQuery尝试了很多方法，但没有成功。请有人帮助我。我没有更多的想法。

这是我用过的CSS：

    #head-balken{
    width:auto;
    height:5px;
    background-color:#00C;
    margin-left:110px;  
}

    #header {

    list-style-type: none;
    background-color: #666;
    line-height: 52px;
    height: 52px;
    margin-left:110px;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .menu {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
    font-size:18px;
    color:#FFF;
    text-decoration:none;
    font-family: 'Gudea', sans-serif;
}


    .menu:hover{

    position:relative;
    height:55px;
    top:-3px;
    background-color: #00C;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

    .menu.active{

    position:relative;
    height:55px;
    top:-3px;
    background-color: black;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

这是我的HTML代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/head.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>

<script>

</script>

<title>HBH-Interne</title>

</head>

<body>
    <div id="head-picture">
        <img src="image/hbhlogo.jpg" width="110px" height="57px" />
    </div>    


    <div id="header">
        <ul id="nav"> 
            <a href="home.php?seite=interne"><li class="menu">Interne Funktionen</li></a>
            <a href="home.php?seite=doku"><li class="menu" >Dokumentation</li></a>
            <a href="home.php?seite=desktop "><li class="menu" >Desktop Sitzungen</li></a>
            <a href="home.php?seite=admin"><li class="menu" >Administration</li></a>

            <a href="#"><li class="login" >Login</li></a>
        </ul>
    </div>
    <div id="head-balken"></div>        

</body>
</html>

Answer 1

查看您的CSS，您必须将“active”类添加到您的li。

所以：

<li class="menu active">Interne Funktionen</li>

Answer 2

用户jQuery toggleClass（）

http://api.jquery.com/toggleClass/

亲自尝试一下，如果您有任何疑问，请回复。

Answer 3

我解决了。

这是我的解决方案：

    var page = document.location.href;

    // Get current URL
    var href = window.location.href;

    // Remove trailing slash
    href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

    // Get last part of current URL
    page = href.substr(href.lastIndexOf('=') + 1);
    console.log(page);


    if(page == 'interne'){
      $('#interne').addClass('active');
    }
    else{
      $('#interne').removeClass('active');
    }

将导航栏设置为活动？

3 个答案: