Как динамически изменить цвет выбранного пункта меню веб-страницы? - PullRequest
Новая
       35

Как динамически изменить цвет выбранного пункта меню веб-страницы?

19 голосов
/ 05 июня 2011

Я новичок в разработке веб-страниц. Я хочу создать меню, аналогичные тем, которые есть на stackoverflow.com (например, Вопросы, Теги, Пользователи, показанные выше). Как изменить цвет выбранного меню (например, цвет фона Вопроса меняется на оранжевый при нажатии)?

Мне удалось изменить цвет при наведении (используя CSS), поскольку это было просто, но у меня возникли проблемы с этим.

Можно ли добиться такого эффекта, изменяя цвет элемента, на который нажали, используя только CSS?

Ответы [ 8 ]

24 голосов
/ 05 июня 2011

Установите стили для класса 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>
8 голосов
/ 05 июня 2011

Вероятно, было бы проще реализовать это с помощью 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>
3 голосов
/ 04 февраля 2012

Я опоздал на этот вопрос, но это действительно супер просто.Вы просто определяете несколько классов вкладок в своем файле 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>
2 голосов
/ 09 апреля 2012

Попробуй это.Цвет удерживается до тех пор, пока не будет нажат другой элемент.

<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>
2 голосов
/ 05 июня 2011

В настоящее время я использую чистое решение 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;
}
2 голосов
/ 05 июня 2011

Я использую 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-->
2 голосов
/ 05 июня 2011

Если вы хотите изменить цвет выбранной в данный момент ссылки / вкладки ... вам лучше всего применить класс (скажем active) к выбранной в данный момент ссылке / вкладке и тогда сделайте это по-другому.

Пример стиля может быть: 

li.active, a.active {
  background-color: #f90;
}
1 голос
/ 08 июня 2011

Наконец мне удалось добиться того, что я намеревался, с вашей помощью и постом Изменить стиль ссылки по клику .Вот код для этого.Я использовал 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>
...