在单击菜单中的名称时对<li>
标签进行分类,可以通过以下步骤实现:
<li>
标签添加一个onclick
属性,指定一个JavaScript函数来处理点击事件。<li onclick="classifyItems('category1')">菜单项1</li>
<li onclick="classifyItems('category2')">菜单项2</li>
<li onclick="classifyItems('category3')">菜单项3</li>
classifyItems(category)
中,根据传入的category
参数对<li>
标签进行分类。可以使用DOM操作来实现这一功能。首先,获取所有的<li>
标签元素,然后根据category
参数判断每个菜单项应该属于哪个分类,将其移动到相应的位置。function classifyItems(category) {
// 获取所有的<li>标签元素
var items = document.getElementsByTagName('li');
// 遍历每个菜单项
for (var i = 0; i < items.length; i++) {
var item = items[i];
// 根据category参数判断分类
if (category === 'category1') {
// 将菜单项移动到分类1的位置
// 例如,可以将其添加到id为category1的<ul>标签中
document.getElementById('category1').appendChild(item);
} else if (category === 'category2') {
// 将菜单项移动到分类2的位置
// 例如,可以将其添加到id为category2的<ul>标签中
document.getElementById('category2').appendChild(item);
} else if (category === 'category3') {
// 将菜单项移动到分类3的位置
// 例如,可以将其添加到id为category3的<ul>标签中
document.getElementById('category3').appendChild(item);
}
}
}
<ul>
标签来创建分类容器,并为每个容器指定一个唯一的id。<ul id="category1"></ul>
<ul id="category2"></ul>
<ul id="category3"></ul>
通过以上步骤,当单击菜单中的名称时,对<li>
标签进行分类的功能就可以实现了。根据不同的分类,将菜单项移动到相应的位置,实现对<li>
标签的分类。
领取专属 10元无门槛券
手把手带您无忧上云