페이지와 함께 몇 가지 탐색 링크,내가 원하는 링크는 현재 페이지의 강조 표시된 것처럼,이:
링크"HTML 특성"강조 표시(굵게 표시)이후 이 링크 중 하나는 현재 페이지입니다.
내가 이것을 알고 구현할 수 있는 수동으로(그냥 강조 표시된 링크를 따라하지만,거기에 몇 가지 스마트 방법은? 하이라이트는 바로 동적으로 링크하고 자동으로?
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;
}
자바스크립트:
<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>
당신은 설정할 수 있습니다 id 몸의 페이지의 일부 값을 나타내는 현재 페이지입니다. 다음 각 요소에 대한 메뉴에서 당신이 설정된 클래스의 특정 메뉴 항목을 선택합니다. 과 내에서 CSS 로 설정할 수 있습니다 규칙을 강조하는 메뉴 항목은 특히...
는지't make much sense,그래서 여기는's 예를 들어:
<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;
}
당신을 변경할 필요가 있 ID 각 페이지 하지만,CSS,동일하게 유지하는 것이 중요로 CSS 은 종종 캐시되고 필요할 수 있습 강제로 새로 고침을 업데이트합니다.
It's 지 않는 동적지만,그's 방법 중 하나는's 간단하게 하고,당신이 할 수 있는 그냥는
메뉴에서 html 을 사용하여 템플릿 파일 PHP 또는 이와 유사한.
그것은 당신이 필요 현재드로이".메뉴-현재 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;
}
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 후 HTML 코드입니다.
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
<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>
자바스크립트:
<script type="text/javascript">
$(function() {
var url = window.location;
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
</script>
CSS:
.active{
color: #fff;
background-color: #080808;
}
HTML:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"><i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
</li>
<li>
<?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
</li>
</ul>
</li>
</ul>
나는 보통 이용 클래스에 이것을 달성. It's 을 구현하기 매우 간단하여,아무것도 탐색 링크,하이퍼링크와 등등.
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.) *상위 메뉴를 클릭할 때까지 하위 메뉴 버튼이 표시되지 않습니다.
작업이 필요한 사항은 다음과 같습니다.
여기서 코드를 참조하십시오. 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>
</div>
JQuery는 처음이라서, 어떤 도움이라도 주시면 감사하겠습니다:) var 하위 메뉴;
$('.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);
});