如何設置活躍在cssmenu

大家好，這是用於該腳本的CSS代碼。我想設置活動狀態爲同一次點擊標籤..如何設置活躍在cssmenu

@import url(http://fonts.googleapis.com/css?family=Raleway); 

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#cssmenu { 
    width: auto; 
    border-bottom: 3px solid #47c9af; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
} 
#cssmenu ul { 
    background: #ffffff; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-right > ul > li > a { 
    margin-right: 0; 
    margin-left: -4px; 
} 
#cssmenu > ul > li > a { 
    z-index: 2; 
    padding: 18px 25px 12px 25px; 
    font-size: 15px; 
    font-weight: 400; 
    text-decoration: none; 
    color: #444444; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    margin-right: -4px; 
} 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
    color: #ffffff; 
} 
#cssmenu > ul > li > a:after { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    width: 100%; 
    height: 120%; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: bottom; 
    -moz-transform: perspective(5px) rotateX(2deg); 
    -moz-transform-origin: bottom; 
    transform: perspective(5px) rotateX(2deg); 
    transform-origin: bottom; 
} 
#cssmenu > ul > li:active > a:after, 
#cssmenu > ul > li:hover > a:after, 
#cssmenu > ul > li > a:hover:after { 
    background: #47c9af; 
} 
#cssmenu ul > li:active{ 
    background-color: #47c9af; 
}

和HTML被提及如下..

<div id='cssmenu'> 
<ul> 
    <li><a href='#'>Home</a></li> 
    <li><a href='#'>Products</a></li> 
    <li><a href='#'>Company</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div>

但是，當我選擇的活動是沒有得到改變標籤...

來源

2016-05-15 Prashanth S

我想李元素不能被激活，錨元素（A）可以是主動的，所以你應該只是使用

a:active

而不

li:active

在它的前面。

或者，如果你需要設置LI元素活躍的，你可以使用JavaScript用於添加類點擊li元素，然後風格。主動類

來源

2016-05-15 13:00:31

謝謝您好，我試圖改變爲：積極的，它不被接受..你是否建議刪除#cssmenu ul> li：active {background_color：＃47c9af; }並添加javascript –

但請記住，如果你舔了鏈接和新的頁面加載比它不會再活動。只有在一頁上導航到不同部分時才能使用。在你的情況下，你很可能需要預先添加一些額外的類到不同頁面上的鏈接。例如，如果您有home.html和about.html頁面，然後在home.html頁面上將「active」類添加到與home相對應的菜單元素中，並在about.html中將相同的類添加到相應的菜單項，然後添加樣式li.active如你所需。 –

我也嘗試添加Java也沒有得到添加.. –

如何設置活躍在cssmenu

回答

相關問題