主要内容
这是网站的主要内容。
要实现布局菜单项和更改所选页面的样式项,可以使用HTML、CSS和JavaScript组合来实现。下面是一个简单的示例代码:
HTML代码:
布局菜单项和样式更改
网站标题
主要内容
这是网站的主要内容。
CSS代码(styles.css):
/* 样式表 */
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
padding: 10px;
color: #fff;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px 0;
}
footer {
background-color: #333;
padding: 10px;
color: #fff;
text-align: center;
}
JavaScript代码(script.js):
// 在页面加载完成后执行
window.onload = function() {
// 获取布局菜单项的元素
var layoutMenuItem = document.querySelector('nav ul li:nth-child(4)');
// 为布局菜单项添加点击事件
layoutMenuItem.addEventListener('click', function() {
// 更改所选页面的样式
document.body.style.backgroundColor = 'lightgray';
document.body.style.color = 'black';
});
};
这个示例代码中,布局菜单项是通过JavaScript获取到的,并为其添加了一个点击事件。当点击布局菜单项时,会触发点击事件的回调函数,该函数会更改所选页面的样式,将背景色改为灰色,文字颜色改为黑色。
注意:在示例代码中,HTML、CSS和JavaScript代码分别保存在不同的文件中,并通过和
标签引入到HTML文件中。确保将这三个文件放在同一个目录下,并将HTML文件命名为
index.html
,CSS文件命名为styles.css
,JavaScript文件命名为script.js
。