簡單選項(xiàng)卡的制作违寿，選項(xiàng)卡是頁面中比較常見的部分，其核心原理是通過添加f自定義屬性熟空，獲取到需要的索引藤巢，將類名添加給要顯示的對(duì)象。
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
????<style>
????????#box?{
????????????width:?450px;
????????????height:?300px;
????????????border:?1px?solid?gray;
????????}
????????ul,
????????li?{
????????????list-style:?none;
????????????padding:?0;
????????????margin:?0;
????????}
????????#menu?li?{
????????????float:?left;
????????????width:?150px;
????????????line-height:?35px;
????????????text-align:?center;
????????????background:?#999;
????????}
????????#menu?li.on?{
????????????background:?#fff;
????????}
????????#cnt?div?{
????????????display:?none;
????????????line-height:?300px;
????????????text-align:?center;
????????}
????????#cnt?div.current?{
????????????display:?block;
????????}
????</style>
</head>
<body>
????<div?id="box">
????????<ul?id="menu">
????????????<li?class="on">電影</li>
????????????<li>音樂</li>
????????????<li>游戲</li>
????????</ul>
????????<div?id="cnt">
????????????<div?class="current">最熱電影</div>
????????????<div>熱門歌曲盡在掌握</div>
????????????<div>全新大作息罗，免費(fèi)暢玩</div>
????????</div>
????</div>
????<script>
????????var?mel?=?document.getElementById('menu').getElementsByTagName('li'),
????????????con?=?document.getElementById('cnt').getElementsByTagName('div');
????????for?(i?=?0;?i?<?mel.length;?i++)?{
????????????mel[i].index?=?i
????????????mel[i].onclick?=?function?()?{
????????????????clear();
????????????????this.className?=?"on";
????????????????clear2();
????????????????con[this.index].className?=?"current"
????????????}
????????}
????????function?clear()?{
????????????for?(i?=?0;?i?<?mel.length;?i++)?{
????????????????mel[i].className?=?""
????????????}
????????}
????????function?clear2()?{
????????????for?(i?=?0;?i?<?mel.length;?i++)?{
????????????????con[i].className?=?""
????????????}
????????}
????</script>
</body>
</html>
this關(guān)鍵字,this在函數(shù)內(nèi)部掂咒，this的指向不固定（this指向調(diào)用者），在事件函數(shù)中迈喉，誰觸發(fā)就指向誰绍刮，在函數(shù)外部指向window對(duì)象。自定義屬性挨摸，是指給標(biāo)簽添加已有屬性以外的的屬性孩革。
