#javascript #jquery #html #css #onclick
#javascript #jquery #HTML #css #onclick
Вопрос:
У меня есть меню на основе кнопок, которое ссылается на содержимое страницы. Оно анимировано каким-то jquery, который я нашел в сети. Моя цель — изменить background-image на определенное изображение при нажатии определенной кнопки (например, когда я нажимаю кнопку «история», фоновое изображение меняется на 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> Комментарии:
1. Итак, в чем ваш вопрос?
2. Мне нужен эффект, при котором, когда я нажимаю на кнопку, фон меняется. Извините, что не попал в точку .
3. Нет, это то, чего вы хотите достичь. Какой конкретный вопрос по программированию у вас есть? Мы не являемся сервисом по написанию кода. Мы ожидаем, что сначала вы проведете много исследований, затем предпримете попытку, а затем, если у вас возникнет конкретный вопрос, опубликуете то, что вы сделали, и свой вопрос.
Ответ №1:
Попробуйте приведенный ниже CSS:
.internal-width a:nth-child(1):active {
background-image:url(filenmae.jpg);
}
Ответ №2:
Нацелите кнопку на событие click, после чего в функции нацелите элемент на фоновое изображение и измените его URL.
$(btn).click(function(){ elementWithBackgroundImage.css(‘фоновое изображение’, ‘url’)});