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

标签 php css html

我正在自学 php/html/css,并且一直在研究如何为每个子页面更改页面背景。

例子:

  • 在主页面中,如果我按下“标题 > 联系人”,背景将更改为新图像。

我在 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);

当点击 id 为 toggleColor 的按钮时,header 元素会改变颜色。要了解 Jquery 的工作原理,我建议您从这里开始 Jquery tutorial

您可能还想toggleClass。为此,只需创建一个像这样的 css 规则 .red{background:red;} 然后简单地执行 $header.toggleClass('red')。我已经更新了演示链接。

Demo

关于php - 更改子菜单时如何更改网页背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34471041/

相关文章:

php - Mysql连接两个表问题

css - 动画在盒子里不起作用

javascript - 使用类而不是名称值的 jQuery 验证

html - 表格中的空列重置表格宽度

php - Magento 2.2 Paypal 付款方式选项未显示在结帐中

php - PHP 和 mysql 中的日期比较

javascript - CSS 悬停未按预期执行

javascript - 找到奇数和偶数div并放入包含div中

php - print_r 返回所有 mysql 结果,但 json_encode 什么都不返回

css - 使用动态相对定位在父容器中将一个 DIV 向左浮动,另一个向右浮动