コードコピーは次のとおりです。
<！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">
<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"> </scrip>
<script type = "text/javascript">
// <！[cdata [
$（function（）{
var $ div_li = $（ "div.tab_menu ul li"）;
$ div_li.click（function（）{
$（this）.addclass（ "selected"）//現在の<li>要素が強調表示されます
.siblings（）。removeclass（ "selected"）;
var index = $ div_li.index（this）;
$（ "div.tab_box> div"）//子ノードを選択します。子ノードが選択されていない場合、エラーが発生します。 divがある場合
.eq（index）.show（）// <li>要素に対応する<div>要素を表示
.siblings（）。hide（）;
}）。hover（function（）{
$（this）.addclass（ "Hover"）;
}、関数（）{
$（this）.removeclass（ "Hover"）;
}）
}）
//]]>
</script>
</head>
<body>
<div>
<div>
<ul>
<li>現在の問題</li>
<li>スポーツ</li>
<li>エンターテイメント</li>
</ul>
</div>
<div>
<div>現在の問題</div>
<div>スポーツ</div>
<div>エンターテイメント</div>
</div>
</div>
</body>
</html>