帮我做个网页增删栏目的代码
时间: 2024-03-20 18:41:07 浏览: 14
以下是一个简单的网页增删栏目的 HTML、CSS 和 JavaScript 代码:
HTML:
```
<div>
<h2>栏目列表</h2>
<ul id="columnList">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
<form>
<label for="newColumn">添加栏目:</label>
<input type="text" id="newColumn" name="newColumn">
<button type="button" onclick="addColumn()">添加</button>
</form>
</div>
```
CSS:
```
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
form {
margin-top: 10px;
}
label {
display: inline-block;
width: 100px;
}
input[type="text"] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
```
JavaScript:
```
function addColumn() {
var newColumn = document.getElementById("newColumn").value;
if (newColumn === "") {
alert("栏目名称不能为空!");
return false;
}
var columnList = document.getElementById("columnList");
var newLi = document.createElement("li");
newLi.innerText = newColumn;
columnList.appendChild(newLi);
document.getElementById("newColumn").value = "";
}
```
这些代码将在页面上显示一个栏目列表和一个表单,可以通过表单输入一个新的栏目名称并添加到列表中。如果尝试添加一个空的栏目名称,将弹出一个警告框。