<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用jQuery美化英雄联盟简介页 </title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<h1>英雄联盟</h1>
<p> 《英雄联盟》，简称LOL。</p>
<p id="content">
由<strong>Riot Games </strong>开发，为3D竞技场战游戏，其
<span>主创团队由实力强劲的
<strong>魔兽争霸</strong>
系列游戏多人<span>即时对战</span>自定义地图开发团队
</span>...
<a href="#">更多详情</a>
</p>
<h2>目录</h2>
<ul class="txt_box">
<li class="current">开发团队</li>
<li>游戏周边</li>
<li>游戏介绍</li>
<li>配置需求</li>
<li>游戏背景</li>
</ul>
</body>
</html>
// JavaScript Document
$(document).ready(function() {
$("p").click(function(){
$(".txt_box .current").css({
"background-color":"#6FF"
});
$("p>span").css({
"background-color":"#f9f"
});
$("h1+p").css({
"background-color":"#ff6"
});
$("span span").css({
"background-color":"#f00","color":"#fff"
});
});
});
网友评论