Как динамически изменить цвет выбранного пункта меню веб-страницы?
Я новичок в разработке веб-страниц. Я хочу создать меню, аналогичные тем, которые есть в stackru.com (например, "Вопросы", "Метки", "Пользователи", показанные выше) Как изменить цвет выбранного меню (например, цвет фона Вопроса меняется на оранжевый при нажатии)?
Мне удалось изменить цвет при наведении (используя CSS), поскольку это было просто, но у меня возникли проблемы с этим.
Можно ли добиться такого эффекта, изменяя цвет элемента, на который нажали, используя только CSS?
8 ответов
Установите стили для класса active и hover:
Чем вам нужно сделать li активным, на стороне сервера. Поэтому, когда вы рисуете меню, вы должны знать, какая страница загружена, и установить для нее:
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
Но если вы изменяете содержимое без перезагрузки, вы не можете изменить набор активных элементов li на сервере, вам нужно использовать javascript:
<!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>
Вероятно, было бы проще всего реализовать это с помощью JavaScript ... Вот сценарий JQuery для демонстрации... Как уже упоминалось... у нас есть класс с именем 'active' для обозначения активной вкладки, а НЕ псевдокласса: активный ". Мы могли бы так же легко назвать его как угодно, хотя бы... выбранным, текущим и т. Д. И т. Д.
/* 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>
Я опоздал на этот вопрос, но это действительно супер просто. Вы просто определяете несколько классов вкладок в своем CSS-файле, а затем загружаете нужную вкладку в качестве вашего класса в файле php при создании тега LI.
Вот пример того, как сделать это полностью на сервере:
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>
Я использую PHP, чтобы найти URL и сопоставить имя страницы (без расширения.php, также я могу добавить несколько страниц, которые имеют одно и то же слово, такое как contact, contactform и т. Д. У всех будет добавлен этот класс) и добавить класс с PHP для изменения цвета и т. д. Для этого вам придется сохранять страницы с расширением файла .php,
Вот демо. Измените ваши ссылки и страницы по мере необходимости. Класс CSS для всех ссылок .tab а для активной ссылки есть еще один класс .currentpage (как и функция PHP), так что именно здесь вы будете перезаписывать ваши правила CSS. Вы можете назвать их как угодно.
<?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-->
Предполагая, что вы хотите изменить цвет выбранной ссылки / вкладки... лучше всего применить класс (скажем, active) к выбранной в данный момент ссылке / вкладке, а затем измените стиль.
Пример стиля может быть:
li.active, a.active {
background-color: #f90;
}
Попробуй это. Цвет удерживается до тех пор, пока не будет нажат другой элемент.
<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>
В настоящее время я использую чистое решение CSS.
Добавьте идентификатор тела (или класс), идентифицирующий ваши страницы и элементы меню, а затем используйте что-то вроде:
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;
}
Наконец мне удалось добиться того, что я намеревался со всей вашей помощью и постом " Изменить стиль ссылки" по клику. Вот код для этого. Я использовал JavaScript для этого.
<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>