php - 更改子菜单时如何更改网页背景?

原文 标签 php css html5

我在自学php/html/css,并且一直在学习如何为每个子页面更改页面的背景。
例子:
在主页面中,如果我按“header>contacts”,背景将变为新图像。
我试过使用css,但它并没有改变整个页面的图像,因为我改变的是<section>部分。
培训网页(http://kamiexp.co.nf

最佳答案

你需要javascript来实现这一点。给定以下HTML。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header>
    some content
  </header>
  <button id="toggleColor">click</button>
</body>
</html>

只需在同一目录中创建另一个名为script.js的文件并添加此代码。
(function($){

  var $toggle = $('#toggleColor');
  var $header = $('header');

  $toggle.click(function(){

    $header.css('background', 'red');

  });
})(jQuery);

单击idtoggleColor的按钮时,header元素将更改颜色。要了解jquery的工作原理,我建议您从这里开始Jquery tutorial
您可能还想toggleClass。要做到这一点,只需创建一个类似这样的css规则.red{background:red;}然后简单地执行$header.toggleClass('red')。我已经更新了演示链接。
Demo

相关文章:

php - 使用php和离子alpha推送通知发送推送通知

html - 按钮仅部分可点击错误

jquery - HTML5 AJAX多个文件上传

css - 如何使用.clearfix类?

javascript - JavaScript在jQuery创建的内容中无法正常工作

php - 为什么我们在php中使用mysqli_poll()函数?

php - 如何在不使用数据库的情况下登录

php - 使用mysql查询从关系表中搜索多个类别和行业

html - 简单的背景更改CSS动画不起作用

css - 哪些浏览器支持CSS显示属性的多个关键字值?