CSS Nav bar текущая/активная цветовая ссылка

Первая страница. Цвет панели навигации для текущей страницы не работает. Предложения? CSS ниже. Благодарю.CSS Nav bar текущая/активная цветовая ссылка

HTML

<ul class="nav"> 
    <li><a href="Turf.html">HOME</a></li> 
    <li><a href="Turf2.html">PRODUCTS</a></li> 
    <li><a href="Turf3.html">STAFF</a></li> 
    <li><a href="Turf4.html">LINKS</a></li> 
    <li><a href="Turf5.html">CONTACT</a></li> 
</ul>

CSS

.nav{ 
border:1px solid #ccc; 
border-width:1px 0; 
list-style:none; 
margin:20; 
padding:0; 
text-align:center; 
font-family:sans-serif; 
} 

.nav li{ 
display:inline-block; 
color:#493D26; 
font-size: 15px; 
font-family:sans-serif; 
} 

.nav a{ 
display:inline-block; 
border-width:1px 0; 
padding:15px; 
text-decoration:none; 
color:#493D26; 
font-size: 17px; 
font-style:bold; 
text-transform:capitalize;  
} 

ul.nav a:hover{ 
color: #6CBB3C; 
} 

ul.nav a:current{ 
color: #6CBB3C; 
}

источник

2015-09-28 Katethegreat

посмотреть на этот вопрос, может помочь вам http://stackoverflow.com/questions/18502750/how-to -change-the-color-of-an-anchor-tag-in-a-list-for-being-active-while-alread – arun

Вы можете использовать этот CSS код также.

a: active: когда вы нажимаете на ссылку и удерживаете ее (активно!). a: Побывал: когда ссылка уже была посещена.

Если вы хотите, чтобы ссылка, соответствующая текущей странице будет выделен, вы можете определить, какой конкретный стиль для ссылки -

ul.nav a:visited { 
color: #6CBB3C; 
}

Добавить новый класс только к соответствующему ли (ссылка), либо на сервере -side или на стороне клиента (используя javascript).

источник

2015-09-28 04:55:18

предоставляют релевантный html? –

Ах спасибо, но я думаю, что я слишком много нуоби, чтобы попасть в JS. – Katethegreat

проверка сниппета ..

.nav { 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
    list-style: none; 
 
    margin: 20; 
 
    padding: 0; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    color: #493D26; 
 
    font-size: 15px; 
 
    font-family: sans-serif; 
 
} 
 
.nav a { 
 
    display: inline-block; 
 
    border-width: 1px 0; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #493D26; 
 
    font-size: 17px; 
 
    font-style: bold; 
 
    text-transform: capitalize; 
 
} 
 
ul.nav a:hover { 
 
    color: #6CBB3C; 
 
} 
 
ul.nav a:visited { 
 
    color: #6CBB3C; 
 
}

<ul class="nav"> 
 
    <li><a href="#">HOME</a> 
 
    </li> 
 
    <li><a href="Turf2.html">PRODUCTS</a> 
 
    </li> 
 
    <li><a href="Turf3.html">STAFF</a> 
 
    </li> 
 
    <li><a href="Turf4.html">LINKS</a> 
 
    </li> 
 
    <li><a href="Turf5.html">CONTACT</a> 
 
    </li> 
 
</ul>

источник

2015-09-28 05:03:23

Вы можете использовать JQuery трюк:

Вы должны добавить JQuery файл библиотеки кулака:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("ul.nav li a").each(function() 
    { 
     if(this.href==window.location.href) 
     { 
      $(this).addClass('current'); 
      $(this).removeAttr('href'); 
     } 
    }); 
}); 
</script>

и добавить css:

ul.nav a.current{ 
    color: #6CBB3C; 
}

источник

2015-09-28 07:15:52

Спасибо, но я попробовал это, и он тоже не сработал - я ожидаю, что мне не известно, как насчет JS. – Katethegreat

Привет, Katethegreat, я отредактировал свой ответ, теперь он более полезен, Теперь вы должны просто скопировать этот скрипт. –

О господи ..

Попробуйте .nav ul вместо ul.nav :)

источник

2015-09-28 08:48:52

Не работает для меня, но спасибо. – Katethegreat

CSS Nav bar текущая/активная цветовая ссылка

ответ

Смежные вопросы