내비게이션의 활성 탭 강조 표시

내 탭 탐색 사이트에서 활성 탭을 강조 표시하려고합니다. 이것은 탭을위한 html 발췌 문장입니다.내비게이션의 활성 탭 강조 표시

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Title here</title> 
<link href="style.css" media="all" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
.auto-style1 { 
     font-size: medium; 
} 
</style> 
</head> 

<body> 

<div id="container"> 
    <div id="navigation">      
     <ul> 
      <li class="link"><a href="default.html" title="Product">Home</a></li> 
      <li class="link"><a href="Research.html" title="Product">Research</a></li>  
      <li class="link"><a href="Teaching.html" title="Progress">Teaching</a></li> 
      <li class="link"><a href="about.html" title="About">Contact</a></li> 
      <li class="link"><a href="CV.html" title="CV">CV</a></li> 
     </ul> 
    </div>

이 활성 탭을 선택하지 않는 내 스타일 시트

/* --------------------------------------------- RESET */ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; font-weight: normal;} 
body { margin: 0pt;} 
ol, ul { list-style-type: none; } 
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
:focus { outline: 0; } 
ins { text-decoration: none; } 
del { text-decoration: line-through; } 
/* tables still need 'cellspacing="0"' in the markup */ 
table { border-collapse: collapse; border-spacing: 0; } 

/* --------------------------------------------- STRUCTURE STYLES */ 
body { 
     font-family: Georgia, "Times New Roman", Times, serif; 
     background: url('bg.jpg') repeat-x top left #f0f0f0; 
} 

#container { 
     width: 960px; 
     height: auto; 
     margin: 0 auto 0 auto; 
} 

#header { 
     color: #fff; 
     font-size: .9em; 
     width: 190px; 
     height: 40px; 
     float: left; 
     margin-right: 2px; 
} 


    /* --------------------------------------------- NAVIGATION */ 
#navigation { 
     padding-top: 15px; 
     width: 960px; 
     float: left; 
} 

#navigation .link { 
     background: #f0f0f0; 
     float: left; 
     text-align:center; 
     font-size:0.5cm 
    } 

#navigation .link:hover { 
     background: #92c19b; 
} 

#navigation .link:focus{ 
     background:silver;  
    } 
#navigation .link:active{ 
background:silver; 
} 

#navigation li a { 
     padding-top: 15px; 
     padding-left: 15px; 
     width: 176px; 
     height: 45px; 
     margin-bottom: 1px; 
     border-left: #fff solid 1px; 
     color: #000; 
     float: left; 
     font-size: 1em; 
} 

#navigation p { 
     position: absolute; 
     font-size: .8em; 
     top: 45px; 
     padding-left: 15px; 
} 

/* --------------------------------------------- FONTS & IMAGES */ 
h1 {font-size: 1.9em;} 
#header h1 {padding: 15px; background: #000; text-align: center; font-weight: bold;} 
#header a {color: #fff;} 
h2 {font-size: 1.9em;} 
#splash h2 {color: #12884f;} 
h3 {font-size: 1.4em; line-height: 1.1em;} 
h4 {font-size: 1em; font-weight: bold;} 
p {font-size: .8em; line-height: 1.6em;} 
p.footer {font-size: .6em; color: #000; text-align: right; padding-top: 100px;} 
p.header {font-size: .8em; font-style: italic; color: #ababab;} 
#content p, #content h3, #sidebar h3, #content h4, #sidebar p {margin-bottom: 25px;} 
img {margin: 0 0 25px 0;} 
li {font-size: .7em; margin-bottom: 10px;}

모두 li:active 및 li:focus입니다. 하지만 이상하게도 li:hover이 작동하지 않습니다.

이 문제를 해결하기 위해 할 수있는 일은 무엇입니까 ??

나는 이런 식으로 뭔가를 강조 찾고 있어요 :

enter image description here

출처

2013-02-14 raghu_3

미안 해요 내 실수

건배, 그냥 "{"는이 중괄호를 열기 전에 ","마지막 쉼표를 제거하고 작동합니다.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Home</title> 
     <style> 
      #home #nav_home a, 
      #research #nav_research a, 
      #teaching #nav_teaching a, 
      #about #nav_about a, 
      #cv #nav_cv a { 
       color:aqua; 
      } 
     </style> 
    </head> 
    <body id="research"> 
     <ul> 
      <li id="nav_home"><a href="">Home</a></li> 
      <li id="nav_research"><a href="">Research</a></li> 
      <li id="nav_teaching"><a href="">Teaching</a></li> 
      <li id="nav_about"><a href="">About</a></li> 
      <li id="nav_cv"><a href="">CV</a></li> 
     </ul> 
    </body> 
</html>

나는이 도움이 :) 오답에 대한 죄송 전에, 난 그냥 웹 개발에게 자신을 시작 해요 말했듯이 희망 : 여기에 그냥 테스트 예입니다.

건배!

출처

2013-02-14 15:06:01 Dasuevia

CSS는이 : 링크가 활성화 될 때 활성 선택에만 적용 - 클릭하고 즉. 포커스 선택기는 키보드 이벤트 또는 다른 사용자 입력을 허용하는 요소에서만 사용할 수 있습니다. 나는 웹 개발에 대해 처음으로 스스로 익숙하지만, 당신이 그 선택자로 당신이 찾고있는 것을 성취 할 수 없을 것이라고 생각합니다.

탭 메뉴의 각 페이지에 대한 body 태그에 ID를 할당하고 메뉴의 모든 li에 다른 ID를 할당 해 볼 수 있습니다. 예를 들어 :

는

<body id="home">  <!-- on default.html --> 
<body id="research"> <!-- on research.html --> 
<body id="teaching"> <!-- on teaching.html --> 
<body id="contact">  <!-- on about.html --> 
<body id="cv">   <!-- on cv.html -->

메뉴는 다음과 같이 보일 수 있습니다 :

<ul> 
    <li class="link" id="nav_home"><a href="default.html" title="Product">Home</a></li> 
    <li class="link" id="nav_research"><a href="Research.html" title="Product">Research</a></li> 
    <li class="link" id="nav_teaching"><a href="Teaching.html" title="Progress">Teaching</a></li> 
    <li class="link" id="nav_contact"><a href="about.html" title="About">Contact</a></li> 
    <li class="link" id="nav_cv"><a href="CV.html" title="CV">CV</a></li> 
</ul>

그런 다음 당신의 CSS에 당신이 이런 일을 할 수있는 :

#home #nav_home a, 
#research #nav_research a, 
#teaching #nav_teaching a, 
#contact #nav_contact a, 
#cv #nav_cv a, { 
    background:silver; 
}

또 다른 옵션은 단지 만들 것 새 클래스 (예 : class = "active_link") 및 활성 탭에 대한 관련 스타일을 선택한 다음 페이지 당 수동으로 설정합니다.

내가 말했듯이 저는 웹 개발에 익숙하지 않았지만 두 솔루션 모두 작동해야합니다. 좀 더 역동적 인 것을 찾고 있다면 자바 스크립트가 필요할 것입니다.

이 정보가 도움이되기를 바랍니다.

출처

2013-02-14 02:24:32 Dasuevia

방금 한 말대로 작동하지 않습니다. :-( –

내비게이션의 활성 탭 강조 표시

답변

관련 문제