На странице с некоторыми навигационными ссылками, я хочу ссылку на текущей странице, выделенные, так же, как это:выделить меню навигации для текущей страницы
Ссылка "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 или аналогичного.
Я обычно справиться с этим на стороне сервера вещей (подразумевается PHP, ASP.NET и т. д.). Идея заключается в том, что при загрузке страницы серверная сторона контролирует механизм (возможно, устанавливая значение CSS), который отражается в полученном HTML-клиенте.
Можете ли вы дать более подробную информацию? – hguser
Попробуйте использовать
a:active{
font-weight: bold;
}
в вашем файле css.
'a: active' выбирает ссылку, которая в данный момент нажата (или выбрана), поэтому я не думаю, что это то, что после этого стоит оригинальный плакат. – icabod
Фактически icabod прав. Это не работает или нет, что я хотел. Когда я нажимаю ссылку, будет отображаться новая страница, все стили приходят к умолчанию. – hguser
Вы можете использовать Javascript для разбора DOM и выделить ссылку с той же меткой, что и первые h1-теги. Но я думаю, что это overkill =)
Было бы лучше установить var, который содержит заголовок вашей страницы, и использовать его для добавления класса по соответствующей ссылке.
Hi Habax; помните, что вы отвечаете на старый вопрос, поэтому автор исходного вопроса, вероятно, давно решил свою проблему так или иначе. Чтобы ваш ответ был полезным, он должен быть хорошим ответом для других читателей, которые ищут на сайте решения подобных проблем; поэтому я рекомендую добавить намного больше объяснений и деталей, возможно, со ссылками на официальную документацию, чтобы действительно оправдать, почему этот метод является лучшим решением для такого рода проблем. –
Мне кажется, что вам нужен текущий код, как этот ».меню ток 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>
Возможно, это не сработало бы, если вы работали в подкаталоге, но в вашем меню использовались относительные ссылки - например, если ваша страница была на 'example.com/site /', это было бы совершенно верно для всех ваших ссылок на be 'a.html',' b.html' и т. д., но путь будет '/ site/a.html', который не соответствует? – icabod
Это будет/отлично работает, если ваши ссылки в меню полны, а не относительны. Это просто использование селектора jquery для поиска элемента с той же ссылкой, что и страница, на которой вы находитесь внутри вашего навигационного элемента. Почему вы говорите, что это не сработает? В приведенном выше примере до тех пор, пока ваши элементы ссылок href = "/ site/a.html" будут работать. –
Как вы упомянули, это потребует, чтобы ваши пути были полными, а не относительными. Это не проблема сама по себе, но может сделать развитие болью. Если вы разрабатываете в Windows, скажем, 'C: \ webdev \ site1', и загружаете файл прямо в браузер, а не через сконфигурированный httpd,' document.location.pathname' дает, например, '/ C:/webdev/site1/index.html'. Опираясь на полное имя пути может вызвать всевозможные проблемы, когда относительные пути будут работать так же хорошо, обеспечивая при этом переносимость. – icabod
Css классы здесь
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
Сделайте ваш HTML, как это, указан URL в качестве идентификатора
<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();
Обычно я использую класс для достижения этой цели. Это очень просто реализовать ни к чему, навигационные ссылки, гиперссылки и т.д.
В вашем CSS документ вставки:
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
Это сделает парения состояние элементов списка имеют красный текст и белый фон. Прикрепите этот класс к любой ссылке на «текущей» странице и отобразите те же стили.
Im ваш 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.) sub кнопки меню не видны до сверху меню щелкнул
Вот что нужно работать:
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>
Нужно ли положить этот скрипт в раздел главы? Где лучшее место?
<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="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">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="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
</li>
</ul>
</nav>
JQuery является новым для меня, любая помощь будет в значительной степени будут оценены :) вар подменю;
$('.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);
});
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>
Звучит неплохо, просто. Но как предупредить идентификатор каждой страницы? На стороне сервера? – hguser
Для одного из моих сайтов страницы были статическими html - этот метод просто упростил обновления (поскольку меню было в включенном файле, мне нужно было только его изменить один раз, если я добавлю новую страницу). Тем не менее, да, вам потребуется какой-то способ установить идентификатор тела на стороне сервера. Как вы это делаете, это зависит от того, как вы запускаете свой сайт. Например, в моем блоге Wordpress используется тема, которая устанавливает «класс» в теге body в зависимости от того, какая страница просматривается. – icabod
Этот подход означает, что вы должны иметь элемент тела во всех представлениях. Не очень элегантный. Вам почти наверняка понадобится JS, чтобы сделать это динамически. jQuery делает это довольно легко. Посмотрите на мой ответ ниже. –