题目:使用JS开发任意一个主页页面 作业
要求:
1.必须使用JS根据下面的数据生成顶部菜单,不能是静态文字;
2.必须使用JS根据下面的数据生成左侧一级分类,不能是静态文字;
3.页面元素必须包含导航栏、轮播图、一级分类菜单
详细代码最下边方式获取
var menuLeft = [{
‘href’: ‘/a’,
‘name’: ‘电商’
}, {
‘href’: ‘/b’,
‘name’: ‘苹果’
}, {
‘href’: ‘/c’,
‘name’: ‘服装’
}]
参考循环代码
menuLeft.forEach((e, i) => {
var a = document.createElement(‘a’)
a.href = e.href
a.innerHTML = e.name
var li = document.createElement(‘li’)
li.appendChild(a)
var left = document.querySelector(‘.menu ul.left’)
left.appendChild(li)
})
左侧一级分类数据
var category = [
{‘title’: ‘家用电器’},
{‘title’: ‘手机 / 运营商 / 数码’},
{‘title’: ‘电脑 / 办公’},
{‘title’: ‘家居 / 家具 / 家装 / 厨具’},
{‘title’: ‘男装 / 女装 / 童装 / 内衣’},
{‘title’: ‘美妆 / 个护清洁 / 宠物’},
{‘title’: ‘女鞋 / 箱包 / 钟表 / 珠宝’},
{‘title’: ‘男鞋 / 运动 / 户外’},
{‘title’: ‘房产 / 汽车 / 汽车用品’},
{‘title’: ‘母婴 / 玩具乐器’},
{‘title’: ‘食品 / 酒类 / 生鲜 / 特产’},
{‘title’: ‘艺术 / 礼品鲜花 / 农牧园艺’},
{‘title’: ‘医药保健 / 计生情趣’},
{‘title’: ‘图书 / 文娱 / 教育 / 电子书’},
{‘title’: ‘机票 / 酒店 / 旅游 / 生活’},
{‘title’: ‘支付 / 白条 / 保险 / 企业金融’},
{‘title’: ‘安装 / 维修 / 清洗 / 二手’},
{‘title’: ‘工业品 / 元器件’},
{‘title’: ‘酒店’},
{‘title’: ‘火车票’},
]
参考循环代码
categoryData.forEach((e, i) => {
var title = document.createElement(‘div’) // 创建一级菜单标题元素
title.className = ‘title’ // 给一级菜单设置class属性
title.innerHTML = e.title // 给一级菜单设置文字
var li = document.createElement('li') // 创建一级菜单的li元素
li.appendChild(title) // 将标题元素添加到li元素
var category = document.querySelector(‘.menu .category’) // 获取 category 元素
catego‘ry.appendChild(li) // 将li元素添加到 category div中