Wie kann die Farbe des ausgewählten Menüelements einer Webseite dynamisch geändert werden?
Ich bin neu in der Entwicklung von Webseiten. Ich möchte Menüs erstellen, die denen in stackoverflow.com ähneln (z. B. Fragen, Tags, Benutzer, die oben angezeigt werden). Wie ändere ich die Farbe des ausgewählten Menüs (z. B. ändert sich die Hintergrundfarbe der Frage in Orange, wenn auf "Anklicken" geklickt wird)?
Ich habe es geschafft, die Farbe während des Schwebens (mit CSS) zu ändern, da dies einfach war, aber ich habe Probleme damit.
Kann ich diesen Effekt erzielen, indem ich die Farbe eines angeklickten Elements nur mit CSS ändere?
Legen Sie die Stile für die Klasse "Aktiv" und "Schweben" fest:
Dann müssen Sie das li auf der Serverseite aktivieren. Wenn Sie also das Menü zeichnen, sollten Sie wissen, welche Seite geladen ist, und es auf Folgendes einstellen:
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
Wenn Sie den Inhalt jedoch ohne erneutes Laden ändern, können Sie das aktive li-Element auf dem Server nicht ändern. Sie müssen Javascript verwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.menu{width: 300px; height: 25; font-size: 18px;}
.menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
.menu li:hover, .menu li.active {
background-color: #f90;
}
</style>
</head>
<body>
<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$(".menu li").click(make_button_active);
}
)
</script>
</body>
</html>
Es wäre wahrscheinlich am einfachsten, dies mit JavaScript zu implementieren ... Hier ist ein JQuery-Skript zur Demo ... Wie die anderen erwähnten ... haben wir eine Klasse mit dem Namen 'active', um den aktiven Tab anzuzeigen - NICHT die Pseudoklasse: aktiv.' Wir hätten es aber genauso leicht irgendetwas nennen können ... ausgewählt, aktuell usw. usw.
/* CSS */
#nav { width:480px;margin:1em auto;}
#nav ul {margin:1em auto; padding:0; font:1em "Arial Black",sans-serif; }
#nav ul li{display:inline;}
#nav ul li a{text-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;}
#nav ul li a:hover{background:#ff9900; color:#ffffff;}
#nav ul li a.active {background:#ff9900; color:#ffffff;}
/* JQuery Example */
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
/* HTML */
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>
Ich komme zu spät zu dieser Frage, aber es ist wirklich super einfach. Sie definieren einfach mehrere Registerkartenklassen in Ihrer CSS-Datei und laden dann die gewünschte Registerkarte als Ihre Klasse in die PHP-Datei, während Sie das LI-Tag erstellen.
Hier ist ein Beispiel dafür, wie es vollständig auf dem Server ausgeführt wird:
CSS
html ul.tabs li.activeTab1, html ul.tabs li.activeTab1 a:hover, html ul.tabs li.activeTab1 a {
background: #0076B5;
color: white;
border-bottom: 1px solid #0076B5;
}
html ul.tabs li.activeTab2, html ul.tabs li.activeTab2 a:hover, html ul.tabs li.activeTab2 a {
background: #008C5D;
color: white;
border-bottom: 1px solid #008C5D;
}
PHP
<ul class="tabs">
<li <?php print 'class="activeTab1"' ?>>
<a href="<?php print 'Tab1.php';?>">Tab 1</a>
</li>
<li <?php print 'class="activeTab2"' ?>>
<a href="<?php print 'Tab2.php';?>">Tab 2</a>
</li>
</ul>
Es gibt eine reine CSS-Lösung, die ich derzeit verwende.
Fügen Sie eine Body-ID (oder Klasse) hinzu, die Ihre Seiten und Ihre Menüelemente identifiziert, und verwenden Sie dann Folgendes:
HTML:
<html>
<body id="body_questions">
<ul class="menu">
<li id="questions">Question</li>
<li id="tags">Tags</li>
<li id="users">Users</li>
</ul>
...
</body>
</html>
CSS:
.menu li:hover,
#body_questions #questions,
#body_tags #tags,
#body_users #users {
background-color: #f90;
}
Versuche dies. Sie behält die Farbe bei, bis auf ein anderes Element geklickt wird.
<style type="text/css">
.activeElem{
background-color:lightblue
}
.desactiveElem{
background-color:none
}
}
</style>
<script type="text/javascript">
var activeElemId;
function activateItem(elemId) {
document.getElementById(elemId).className="activeElem";
if(null!=activeElemId) {
document.getElementById(activeElemId).className="desactiveElem";
}
activeElemId=elemId;
}
</script>
<li id="aaa"><a href="#" onclick="javascript:activateItem('aaa');">AAA</a>
<li id="bbb"><a href="#" onClick="javascript:activateItem('bbb');">BBB</a>
<li id="ccc"><a href="#" onClick="javascript:activateItem('ccc');">CCC</a>
Ich benutze PHP um die URL zu finden und den Seitennamen zu finden (ohne die Erweiterung von .php, kann ich auch mehrere Seiten hinzufügen, die alle dasselbe Wort gemeinsam haben wie contact, contactform, etc. Allen wird diese Klasse hinzugefügt) und eine Klasse mit PHP zum Ändern der Farbe usw.) hinzugefügt. Dafür müssten Sie Ihre Seiten mit der Dateierweiterung .php Speichern.
Hier ist eine Demo. Ändern Sie Ihre Links und Seiten nach Bedarf. Die CSS-Klasse für alle Links ist .tab Und für den aktiven Link gibt es auch eine andere Klasse von .currentpage (So wie die PHP Funktion)) Hier können Sie Ihre CSS-Regeln überschreiben und nach Belieben benennen.
<?php # Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];?>
<div class="nav">
<div class="tab
<?php
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " currentpage";
?>"><a href="index.php">Home</a>
</div>
<div class="tab
<?php
if(preg_match("/services/i", $currentpage))
echo " currentpage";
?>"><a href="services.php">Services</a>
</div>
<div class="tab
<?php
if(preg_match("/about/i", $currentpage))
echo " currentpage";
?>"><a href="about.php">About</a>
</div>
<div class="tab
<?php
if(preg_match("/contact/i", $currentpage))
echo " currentpage";
?>"><a href="contact.php">Contact</a>
</div>
</div> <!--nav-->
Angenommen, Sie möchten die Farbe des aktuell ausgewählten Links/Tabs ändern. Wenden Sie am besten eine Klasse an (sagen Sie active) auf den aktuell ausgewählten Link/Tab und gestalten Sie diesen dann anders.
Beispielstil könnte sein:
li.active, a.active {
background-color: #f90;
}
Endlich habe ich es geschafft, mit all deiner Hilfe und dem Beitrag Ändere einen Link-Stil das zu erreichen, was ich beabsichtigt hatte. Hier ist der Code dafür. Ich habe dazu JavaScript verwendet.
<html>
<head>
<style type="text/css">
.item {
width:900px;
padding:0;
margin:0;
list-style-type:none;
}
a {
display:block;
width:60;
line-height:25px; /*24px*/
border-bottom:1px none #808080;
font-family:'arial narrow',sans-serif;
color:#00F;
text-align:center;
text-decoration:none;
background:#CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:0em;
padding: 0px;
}
a.item {
float:left; /* For horizontal left to right display. */
width:145px; /* For maintaining equal */
margin-right: 5px; /* space between two boxes. */
}
a.selected{
background:orange;
color:white;
}
</style>
</head>
<body>
<a class="item" href="#" >item 1</a>
<a class="item" href="#" >item 2</a>
<a class="item" href="#" >item 3</a>
<a class="item" href="#" >item 4</a>
<a class="item" href="#" >item 5</a>
<a class="item" href="#" >item 6</a>
<script>
var anchorArr=document.getElementsByTagName("a");
var prevA="";
for(var i=0;i<anchorArr.length;i++)
{
anchorArr[i].onclick = function(){
if(prevA!="" && prevA!=this)
{
prevA.className="item";
}
this.className="item selected";
prevA=this;
}
}
</script>
</body>
</html>