نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<title> </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 () {
$ (هذا) .addClass ("محدد") // يتم تمييز عنصر <li> الحالي
.siblings ().
index var = $ div_li.index (هذا) ؛
$ ("div.tab_box> div") // حدد العقد الفرعية. إذا لم يتم تحديد عقدة الطفل ، فسيتم حدوث خطأ. إذا كان هناك div فيه
.eq (index) .Show () // أظهر العنصر <div> المقابل لعنصر <li>
.siblings ().
}). hover (function () {
$ (هذا) .addClass ("Hover") ؛
}،وظيفة(){
$ (هذا) .removeclass ("Hover") ؛
})
})
//]]>
</script>
</head>
<body>
<viv>
<viv>
<ul>
<li> الشؤون الحالية </li>
<li> الرياضة </li>
<li> الترفيه </li>
</ul>
</div>
<viv>
<div> الشؤون الحالية </div>
<div> الرياضة </div>
<div> الترفيه </div>
</div>
</div>
</body>
</html>