<div class="abcd">
<article class="xyz">
<a href="#"><img src="#"></a>
<hgroup><h1>Make it Personal</h1></hgroup>
</article>
</div>
div 안에 6 개의 'article'태그가 있습니다. 탭으로 사용하고 있습니다. 나는 6 페이지가 있고 나는 6 페이지 전부에 동일한 부호를 적용했다. 나는 그들이 활동할 때 강조되기를 원한다. 클릭 할 때 위의 코드와 동일한 6 페이지 중 하나로 이동합니다. 탭을 활성화하려면 일부 CSS 속성을 적용하고 싶습니다.클릭하면 CSS 속성을 탭에 적용 할 수 있습니까?
어떻게하면 간단한 자바 스크립트를 사용하여 구현할 수 있습니까?
다음은 도움이되는 몇 가지 코드입니다.
html,body {
margin:0;
padding:0;
color:#222;
background:#FFF;
}
body {
padding:10px;
font:76%/150% Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
outline: 0; /* removes dotted border around a:active from Firefox */
}
#nav {
margin:0;
padding:0;
background:#708090 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #191970;
border-width:1px 1px 1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#708090;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #191970;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover {
color:#fff;
background:#191970;
}
#nav li:first-child a {
border-left:1px solid #191970;
}
#home #nav-home a,
#about #nav-about a,
#contact #nav-contact a {
background:#00FFFF; /* Active Page Color */
color:#000;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#contact #nav-contact a:hover {
background:#FFF;
color:#000;
}
#nav a:active {
background:#7FFF00; /*turns this color briefly when link is selected*/
color:#000;
}
</style>
</head>
<body id="about">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
</body>
</html>
먼저 그것을 검색하려고 했습니까? – khurram
jquery로 코드를 얻고 있습니다 ...하지만 자바 스크립트를 사용하고 싶습니다. –
jquery는 javascript입니다. – Supr