Question

我有一个基于按钮的菜单，该菜单引用了页面的内容。它是由我在网上找到的一些jquery激发的。我的目标是在单击特定按钮的同时将background-image更改为特定图像（例如，当我单击“ historia”按钮时，背景图像将更改为historia.png），但同时保持向下滚动到参考部分

* {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	z-index: 2;
}

body {
	background-size: cover;
}

/* tło */
.background {
	position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
	background-image: url(mainback.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	filter: blur(2px;);
	-webkit-filter: blur(2px);
}

.undefinedheader {
  width: 50vw;
  height: 65px;
  background-color: grey;
  margin: auto;
	top: 8vh;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
  box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63);
  border-radius: 5px;
  font-family: 'Merriweather', serif;
  font-size: 20px;
	text-align: center;
	position: absolute;
}
.container {
	height: 420px;
	background-color: blue;
  top: 30vh;
  width:100%;
  background-image: linear-gradient(to right top, #a62a71, #963680, #83408c, #6d4993, #565096, #4560a6, #2e70b2, #007fba, #009ed0, #00bee0, #1cddeb, #5ffbf1);
  box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63);
  transform: translateY(50%);
	display: block;
}

.internal-width {
	padding: 0;
  width: 90vmin;
  margin-left: auto;
  margin-right: auto;
	display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

.box
{
	width: 220px;
	height: 100px;
	background-color: #22584F;
	margin:1%;
	flex-basis:calc(94% / 3);
	float: left;
	margin-bottom: 50px;
	margin-top: 50px;
	transition: all 0.2s ease-in-out;
  border-radius: 20px;
	position: relative;
	font-family: fantasy;
	font-size: 4vw;
	text-align: center;
	color: black;
	text-decoration: none;
}
.box:hover
{
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4);
	cursor: pointer;
	transform: scale(1.1);
}


/* zawartość indeksu */


section {
	height: 100vh;
	padding: 0;
}

section:nth-child(2){
	display: flex;
}
section:before{
	content: attr(data-text);

}

.starttext {
	padding: 0;
	margin: 0;
	font-size: 0;
}
.internal-box1{

	position: relative;
	width: 90vw;
	top: 45%;
  margin-left: auto;
  margin-right: auto;
	display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

.contentbox {
	width: 250px;
	height: 80px;
	background-color: #22584F;
	margin:1%;
	flex-basis:calc(110% / 5);
	float: left;
	margin-bottom: 50px;
	margin-top: 50px;
	transition: all 0.2s ease-in-out;
  border-radius: 20px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	font-size: 2.4vw;
	line-height: 80px;
	text-decoration: none;
	color: black;
}

.contenttitle{
	position: relative;
	background-color: grey;
	width: 70vw;
	height: 80px;
	margin-top: 10px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: middle;
	font-size: 5vw;
	line-height: 80px;
}

.description {
	position: absolute;
	margin-top: 20px;
	width: 75vw;
	right: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	font-size: 40px;
	line-height: 35px;
	vertical-align: middle;
	font-family: monospace;
}

.contentbox:hover
{
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4);
	cursor: pointer;
	transform: scale(1.1);
}

/* zmiana tła */

#history:hover .background {
	background-image: url(1back.png);
}

<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "stylei.css" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script>
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top;

    // animated top scrolling
    $('body, html').animate({
        scrollTop: pos
    });
});

</script>
</head>

<div class="background" id="back"></div>

<body>

<section id="top">
<div class="starttext" id="start">1</div>
<div class="undefinedheader">
tu może być tytuł
</div>
<div class="container">
	<div class="internal-width">
	<a class="box" href="#1">Historia</a>
	<a class="box" href="#2"></a>
	<a class="box" href="#3"></a>
	<a class="box" href="#4"></a>
	<a class="box" href="#5"></a>
	<a class="box" href="#6"></a>
	</div>
</div>
</section>

<section  id="1">
<div class="starttext">pisanie</div>
  <div class="container">
    <div class="contenttitle">Historia gier planszowych</div>
    <div class="description">
    Gry planszowe jak się okazuje, są dużo starsze niż większości z nas się wydaje, bowiem już około 5000 lat temu ludzie zaczęli tworzyć pierwsze gry planszowe.
    </div>
    <div class="internal-box1">


      <a class="contentbox" href="antiq_pl.html">starożytność</a>
      <a class="contentbox" href="medieval_pl.html">średniowiecze</a>
      <a class="contentbox" href="present_pl.html">czasy nowożytne</a>
      <a class="contentbox" href="#top">do gory</a>

    </div>
</div>
</section>


<section id="2">
<div class="starttext">pisanie</div>
<div class="container">tekst
  <div class="internal-box1">
    <div class="contentlink"></div>
    <div class="contentbox"></div>
    <div class="contentbox"></div>
    <div class="contentbox"></div>
  </div>
</div>
</section>

<section id="3">
<div class="starttext">pisanie</div>
<div class="container">tekst</div>
</section>

<section id="4">
<div class="starttext">pisanie</div>
<div class="container">tekst</div>
</section>

<section id="5">
<div class="starttext">pisanie</div>
<div class="container">tekst</div>
</section>

<section id="6">
<div class="starttext">pisanie</div>
<div class="container">tekst</div>
</section>

</body>

Answer 1

尝试以下CSS：

.internal-width a:nth-child(1):active {
   background-image:url(filenmae.jpg);
}

Answer 2

在函数中将带有click事件的按钮作为目标，然后在函数中将具有背景图像的元素作为目标并更改其url。

$（btn）.click（function（）{elementWithBackgroundImage.css（'background-image'，'url'）}））;

单击更改div背景图像

2 个答案: