A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.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"/>
<!-Apresentando 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 ("selecionado") // O elemento <li> atual é destacado
.siblings (). removeclass ("selecionado");
var index = $ div_li.index (this);
$ ("div.tab_box> div") // selecione nós filhos. Se o nó filho não for selecionado, será causado um erro. Se houver uma div nele
.eq (index) .show () // mostra o elemento <div> correspondente ao elemento <li>
.Siblings (). Hide ();
}). Hover (function () {
$ (this) .Addclass ("Passe");
},função(){
$ (this) .RemoveClass ("Passe");
})
})
//]]>
</script>
</head>
<Body>
<div>
<div>
<ul>
<li> Assuntos atuais </li>
<li> Esportes </li>
<li> Entretenimento </li>
</ul>
</div>
<div>
<div> Assuntos atuais </div>
<div> esportes </div>
<div> entretenimento </div>
</div>
</div>
</body>
</html>