Сохраняйте ссылку активной, когда я перемещаю страницу, пока не выберу другую ссылку - PullRequest
Новая
       12

Сохраняйте ссылку активной, когда я перемещаю страницу, пока не выберу другую ссылку

0 голосов
/ 28 января 2010

У меня проблема со ссылками, я создал меню из ссылок, которое одновременно указывает пользователю, в каком разделе он находится. Меню работает нормально, но когда я начинаю что-то делать с разделом по этой ссылке (который является псевдоклассом активным, как он был выбран), тогда выбранная ссылка меняется на обычную ссылку, поэтому пользователь теряет ориентацию.

Я не думаю, что код нужен, но на всякий случай. 

.menu
{
    width:100%;
    text-align:center; 



    }
.menu a
{
    height:30px;
    width:170px;
    background-image:url('../Images/item.png');
    background-repeat:no-repeat;
    background-position:center; 
    color:Black;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;
    border:none;
    padding:1px 0px 0px 0px;
    margin-top:1px;
    }

.menu a:hover
{
    background-image:url('../Images/itemHover.png');
    background-repeat:no-repeat;
    background-position:center;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;

    }
 .menu a:active
{
    background-image:url('../Images/itemActive.png');
    background-repeat:no-repeat;
    background-position:center;   
    color:White;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;
    text-decoration: none;
    }




            <div class="menu" >
              <a  href='vbscript:show(0)' id='focusme'>Section1</a>
              <a  href='vbscript:show(6)'> Section2 </a>
              <a  href='vbscript:show(2)'> Section3 </a>
              <a  href='vbscript:show(3)'> Section4 </a>
              <a  href='vbscript:show(4)'> Section5</a>
              <a  href='vbscript:show(5)'> Section6 </a>
              <a  href='vbscript:show(1)'> Section7</a>
              <a  href='vbscript:show(7)'> Section8 </a>
              <a  href='vbscript:show(8)'> Section9 </a>
              <a href="javascript:calllast24()"> Section10</a>
            </div>

Кто-нибудь может дать мне подсказку по этому поводу?

Ответы [ 2 ]

2 голосов
/ 28 января 2010

Просто определите другой класс active вместе с a:active и динамически добавьте этот класс к рассматриваемой ссылке (и удалите тот же класс из любых других ссылок в меню).

JavaScript / jQuery идеально подходит для этого. Э.Г. 

$('.menu a').click(function() {
    $('.menu a').removeClass('active');
    $(this).addClass('active');
}

Обновление : или если эти ссылки на самом деле являются синхронными, и вы на самом деле используете технологию просмотра на стороне сервера, такую ​​как PHP / JSP / ASP, то вам нужно вместо этого воспользоваться ее возможностями. Вот пример JSP: 

<ul id="menu">
    <li><a href="foo" ${page == 'foo' ? 'class="active"' : ''}">foo</a></li>
    <li><a href="bar" ${page == 'bar' ? 'class="active"' : ''}">bar</a></li>
    <li><a href="boo" ${page == 'boo' ? 'class="active"' : ''}">boo</a></li>
</ul>

В приведенном выше примере добавляется class="active" только тогда, когда текущая страница соответствует ссылке href. Вы можете сделать подобное в PHP (этот троичный оператор). Не уверен насчет ASP, хотя.

1 голос
/ 28 января 2010

Добавьте имя класса, например «current», к текущей выбранной ссылке, используя JavaScript при ее нажатии.

Вы можете переработать класс "зависания" или сделать уникальный класс. 

.menu a:active, .menu a.current
{
    background-image:url('../Images/itemActive.png');
    background-repeat:no-repeat;
    background-position:center;   
    color:White;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;
    text-decoration: none;
    }
...