布局菜单项,更改所选页面的样式“项”。
创始人
2024-12-25 23:01:32
0

要实现布局菜单项和更改所选页面的样式项,可以使用HTML、CSS和JavaScript组合来实现。下面是一个简单的示例代码:

HTML代码:




  布局菜单项和样式更改
  


  

网站标题

主要内容

这是网站的主要内容。

版权所有 © 2021

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代码分别保存在不同的文件中,并通过