Я новичок в разработке веб-страниц. Я хочу создать меню, аналогичное тем, которые находятся в stackoverflow.com(например, вопросы, теги, пользователи, показанные выше). Как изменить цвет выбранного меню (например, цвет фона вопроса меняется на оранжевый, когда "щелкнут" )?
Мне удалось изменить цвет во время зависания (используя CSS), поскольку это было просто, но у меня возникают проблемы с этим.
Могу ли я достичь такого эффекта изменения цвета элемента с кликом, используя только CSS?
Задайте стили для активного класса и наведите курсор:
Чем вам нужно сделать 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 script для демонстрации... Как упоминалось выше... у нас есть класс с именем 'active', чтобы указать активную вкладку - NOT псевдо-класс ': активный.' Мы могли бы так же легко назвать это чем угодно, но... выбранным, текущим и т.д. И т.д.
/* 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.
Вот пример полного его выполнения на сервере:
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;
}
<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>
Предполагая, что вы хотите изменить цвет выбранной в данный момент ссылки/вкладки... вам лучше всего применить класс (скажем active) к выбранной в данный момент ссылке/вкладке а затем настройте это по-другому.
Пример стиля может быть:
li.active, a.active {
background-color: #f90;
}
Я использую 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-->
В настоящее время я использую чистое решение 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;
}
Попробуйте это. Он удерживает цвет, пока не щелкнет другой элемент.
<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>
Наконец-то мне удалось добиться того, что я намеревался при всей вашей помощи, и сообщение Изменить стиль ссылки onclick. Вот код для этого. Я использовал 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>