2016-05-15 8 views
0

Hallo all dies der CSS-Code für das Skript verwendet wird .. ich den aktiven Status für das gleiche einmal angeklickt Registerkarten ..Wie aktiv setzen in 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; 
} 

und die html erwähnt gesetzt wird gesucht wie unten ..

<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> 

Aber wenn ich den Tabs ausgewählt die aktiven nicht geändert zu werden ...

Antwort

0

glaube, ich li Element nicht aktiv sein kann, Ankerelement (a) kann aktiv sein, so dass Sie sollten nur Verwenden Sie

a:active 

ohne

li:active 

vor ihm.

Oder wenn Sie das LI-Element aktiv setzen, dann können Sie Javascript für das Hinzufügen einer Klasse geklickt li Element verwenden und dann Stil .active Klasse

+0

Hallo Danke, habe ich versucht, als sich ändern: aktiv, es ist nicht akzeptiert werden .. Empfehlen Sie, dieses #cssmenu ul> li: active zu entfernen { background-color: # 47c9af; } und fügen Sie Javascript –

+0

Aber bitte beachten Sie, dass, wenn Sie den Link geleckt und neue Seite geladen wird, als es nicht mehr aktiv sein wird. Es funktioniert nur bei der Navigation auf einer Seite zu verschiedenen Abschnitten. In Ihrem Fall müssen Sie wahrscheinlich den Links auf verschiedenen Seiten einige zusätzliche Klassen hinzufügen. Wenn Sie zum Beispiel home.html und about.html Seiten dann auf home.html Seite haben, fügen Sie dem Menüelement corresponsing to home und on about.html die Klasse "active" hinzu, fügen Sie dieselbe Klasse dem entsprechenden Menüpunkt hinzu und stylen Sie dann li.active wie du es brauchst. –

+0

Ich habe versucht, Java hinzuzufügen, aber es wird nicht hinzugefügt .. –