На странице с некоторыми ссылками навигации я хочу, чтобы ссылка на текущую страницу подсвечивалась так:
Ссылка " Атрибуты HTML" выделена (выделена полужирным шрифтом), так как эта ссылка займет одну из текущей страницы.
Я знаю, что это может быть реализовано вручную (просто освещено в соответствии с ссылкой, но есть ли какой-то умный способ: выделить правильную ссылку динамически и автоматически?
Вы можете установить для идентификатора тела страницы значение, представляющее текущую страницу. Затем для каждого элемента в меню вы устанавливаете класс, специфичный для этого пункта меню. И внутри вашего CSS вы можете настроить правило, которое выделит пункт меню специально...
Это, вероятно, не имеет большого смысла, поэтому вот пример:
<body id="index">
<div id="menu">
<ul>
<li class="index" ><a href="index.html">Index page</a></li>
<li class="page1" ><a href="page1.html">Page 1</a></li>
</ul>
</div> <!-- menu -->
</body>
В файле page1.html вы должны установить id тела: id="page1".
Наконец, в вашем CSS есть что-то вроде следующего:
#index #menu .index, #page1 #menu .page1 {
font-weight: bold;
}
Вам нужно будет изменить идентификатор для каждой страницы, но CSS остается тем же, что важно, поскольку CSS часто кэшируется и может потребовать принудительного обновления для обновления.
Это не динамический, но это один из методов, который просто сделать, и вы можете просто include меню html из файла шаблона с помощью PHP или аналогичного.
CSS
.topmenu ul li.active a, .topmenu ul li a:hover {
text-decoration:none;
color:#fff;
background:url(../images/menu_a.jpg) no-repeat center top;
}
JavaScript:
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$(".topmenu a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
//for making parent of submenu active
$(this).closest("li").parent().parent().addClass("active");
}
});
});
</script>
Код HTML:
<div class="topmenu">
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="NewsLetter.aspx">Newsletter</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Mail</a></li>
<li><a href="#">Service</a></li>
<li style="border:none;"><a href="#">HSE</a></li>
<li><a href="#">MainMenu2</a>
<ul>
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
</ul>
</li>
</ul>
</div>
Мне кажется, что вам нужен текущий код как этот ".menu-current css", я спрашиваю тот же код, который работает как шарм, вы могли бы попробовать что-то вроде этого, возможно, еще какая-то конфигурация
a:link, a:active {
color: blue;
text-decoration: none;
}
a:visited {
color: darkblue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
div.menuv {
float: left;
width: 10em;
padding: 1em;
font-size: small;
}
div.menuv ul, div.menuv li, div.menuv .menuv-current li {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 5px;
font-weight: normal;
}
div.menuv ul ul {
padding-left: 12px;
}
div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
display: block;
text-decoration: none;
padding: 2px 2px 2px 3px;
border-bottom: 1px dotted #999999;
}
div.menuv a:hover, div.menuv .menuv-current li a:hover {
padding: 2px 0px 2px 1px;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.menuv .menuv-current {
font-weight: bold;
}
div.menuv .menuv-current a:hover {
padding: 2px 2px 2px 3px;
border-left: none;
border-right: none;
border-bottom: 1px dotted #999999;
color: darkblue;
}
<script id="add-active-to-current-page-nav-link" type="text/javascript">
function setSelectedPageNav() {
var pathName = document.location.pathname;
if ($("nav ul li a") != null) {
var currentLink = $("nav ul li a[href='" + pathName + "']");
currentLink.addClass("active");
}
}
setSelectedPageNav();
</script>
Css-классы здесь
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
Сделайте свой HTML следующим, установите url как id
<div class="my_menu" id="index-url"><a href="index-url">Index</a></div>
<div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>
Здесь напишите javascript, поместите этот javascript после HTML-кода.
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
Я обычно обрабатывал бы это на стороне сервера (это означает PHP, ASP.NET и т.д.). Идея заключается в том, что когда страница загружается, серверная сторона контролирует механизм (возможно, устанавливая значение CSS), который отражается в полученном HTML-клиенте, который видит клиент.
Попробуйте использовать
a:active{
font-weight: bold;
}
в вашем файле css.
Вы можете использовать Javascript для анализа вашего DOM и выделить ссылку с той же меткой, что и первые теги h1. Но я думаю, что это overkill =)
Было бы лучше установить var, который содержит заголовок вашей страницы, и использовать его для добавления класса по соответствующей ссылке.
Обычно я использую класс для достижения этого. Это очень просто реализовать на что угодно, навигационные ссылки, гиперссылки и т.д.
В вашем документе CSS insert:
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
Это приведет к тому, что состояние наведения элементов списка будет иметь красный текст и белый фон. Прикрепите этот класс тока к любой ссылке на "текущей" странице и отобразите те же стили.
Вставьте свой HTML-код:
<nav>
<ul>
<li class="current"><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>
</nav>
Обратите внимание на следующее:
Вот что работает:
1.) Кнопки верхнего меню видны и выделяются правильно
2.) кнопки меню не отображаются до тех пор, пока не будет нажата кнопка верхняя
Вот что нужно:
1.) при нажатии подменю, поиск новой страницы, чтобы сохранить выбранное подменю открыто (я выделит выбранную кнопку подменю для дальнейшего уточнения при навигации)
Смотрите код здесь: http://jsbin.com/ePawaju/1/edit
или здесь: http://www.ceramictilepro.com/_6testingonly.php#
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Нужно ли мне помещать этот script в раздел главы? Где лучшее место?
<div class="left">
<nav class="vmenu">
<ul class="vnavmenu">
<li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
</li>
</ul>
<ul class="Top1 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">sub4</a>
</li>
</ul>
<ul class="vnavmenu">
<li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
</li>
</ul>
<ul class="Top2 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">1sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">2sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">3sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="#" onclick="location.href='http://www.ceramictilepro.com/_5testingonly.php'; return false;">4sub4</a>
</li>
</ul>
</nav>
JQuery для меня новичок, любая помощь будет очень признательна:) var submenu;
$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {
if (elems == 1) {
if (!visible) $refClass.slideDown('fast');
}
elems--;
});
if (visible) $('#breadcrumbs-pc').animate({
'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
'margin-top': '5rem'
}, 100);
});