코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<제목> </title>
<link href = "css/style.css"rel = "Stylesheet"type = "text/css"/>
<!-jQuery 소개->
<script src = "../ scripts/jquery-1.3.1.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
// <! [cdata [
$ (function () {
var $ div_li = $ ( "div.tab_menu ul li");
$ div_li.click (function () {
$ (this) .addclass ( "selected") // 현재 <li> 요소가 강조 표시됩니다
.SIPLINGS (). removeClass ( "Selected");
var index = $ div_li.index (this);
$ ( "div.tab_box> div") // 자식 노드를 선택합니다. 하위 노드가 선택되지 않으면 오류가 발생합니다. 그것에 div가 있다면
.eq (index) .show () // <li> 요소에 해당하는 <div> 요소 표시
.siblings (). hide ();
}). 호버 (function () {
$ (this) .addclass ( "호버");
},기능(){
$ (this) .removeClass ( "호버");
})
})
//]]>
</스크립트>
</head>
<body>
<div>
<div>
<ul>
<li> 시사 </li>
<li> 스포츠 </li>
<li> 엔터테인먼트 </li>
</ul>
</div>
<div>
<div> 시사 </div>
<div> 스포츠 </div>
<div> 엔터테인먼트 </div>
</div>
</div>
</body>
</html>