Hej,
Sprawa wygląda następująco - mam dwie strony (na projekt szkolny) - główną i podstronę, na której za pomocą navbar'a przełączam pokazywane elementy (trick z display:none;). Problem jest jedynie taki, że po przejściu z głównej strony na podstronę otwiera się domyślnie ustawiony div (bo jeden z nich ma display: block;, a reszta jest niewidoczna). Ja chciałbym osiągnąć coś takiego, że po kliknięciu przycisku na stronie głównej, przeniesie mnie na podstronę i W ZALEŻNOŚCI OD KLIKNIĘTEJ ZAKŁADKI NA STRONIE GŁÓWNEJ wykona się funkcja odkrywająca daną zakładkę. Czy takie coś jest możliwe?
Jestem w tym nieco zielony, więc może porywam się na dużo, ale do odważnych świat należy, nie? :P
P.S. Jeszcze jedna sprawa, ale to takie doszlifowanie tylko tej strony - czy da się ustawić transition na te pojawiające się elementy, żeby nie wyskakiwały jak pół du*y zza krzaka? :D
KOD
v18 linia: moja próba zaimplementowania tego rozwiązania, niezbyt udana :/
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Bezpieczeństwo</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
</head>
<body>
<div class="background">
<div class="main">
<div class="to_center">
<h1><a href="#">BEZPIECZEŃSTWO <br>I OCHRONA DANYCH</a></h1>
<ul>
<a href="podstrona.html javascript:podmiana('s1');"><li>CYBERPRZEMOC</li></a>
<a href="podstrony.html"><li>WIRUSY</li></a>
<a href="podstrony.html"><li>PORADY</li></a>
<a href="podstrony.html"><li>ZABEZPIECZENIA</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>
vPodświetlona linia 13 to właśnie funkcja do wykonania:
<!DOCTYPE html>
<!-- Animation created By CodingNepal -->
<html lang="pl" dir="ltr">
<head>
<meta charset="utf-8">
<title> Cyberbezpieczeństwo </title>
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap" rel="stylesheet">
<script type="text/javascript">
function podmiana(co) {
console.log("lol");
var ile = 4;/*document.getElementById("wybor").options.length;*/
for(var i=1; i<=ile; i++) {
var ktora = "s"+i;
if(ktora == co) {
document.getElementById(ktora).style.display = "block";}
else if(ktora != co) {
document.getElementById(ktora).style.display = "none";}
}
}
</script>
</head>
<body>
<div class="logo_and_nav">
<h1><a href="index.html">BEZPIECZEŃSTWO I OCHRONA DANYCH</a></h1>
<div class="wrapper">
<nav>
<input type="radio" name="tab" id="violence" checked>
<input type="radio" name="tab" id="viruses">
<input type="radio" name="tab" id="advice">
<input type="radio" name="tab" id="security">
<label onClick="podmiana('s1');" for="violence" class="violence"><a href="#"><i class="fas fa-lock"></i>Cyberprzemoc</a></label>
<label onClick="podmiana('s2');" for="viruses" class="viruses"><a href="#"><i class="far fa-comment"></i>Wirusy</a></label>
<label onClick="podmiana('s3');" for="advice" class="adivice"><a href="#"><i class="fas fa-fist-raised"></i>Porady</a></label>
<label onClick="podmiana('s4');" for="security" class="security"><a href="#"><i class="fas fa-skull"></i>Zabezpieczenia</a></label>
<div class="tab"></div>
</nav>
</div>
</div>
<div class="slajd">
<div id="s1">
<h2> Cyberprzemoc </h2>
<p>Przykrym zjawiskiem, z jakim możesz spotkać się podczas użytkowania komunikatora jest cyberprzemoc, czyli zagrożenie polegające na wyrządzaniu krzywdy przez ludzi złośliwych i ordynarnych. Do takich działań zalicza się m.in. wyzywanie, straszenie, czy poniżanie kogoś w Internecie. Może to odbywać się na przykład poprzez robienie komuś zdjęć bez jego zgody, a następnie publikowanie ich i rozsyłanie w sieci. Umieszczone w sieci zdjęcie, przedstawiające wydarzenie niemiłe dla osoby na nim uwiecznionej, opatrzone złośliwymi komentarzami, rodzi w niej poczucie upokorzenia i bezradności. </p>
</div>
<div id="s2">
<h2> Wirusy </h2>
<p>Wirusy też są złośliwe Korzystając z komputera z dostępem do Internetu, jesteś narażony na ściągnięcie tzw. wirusów, czyli programów mających, w założeniu ich autora, uszkodzić twój komputer. Mogą one skasować dane, wyłączyć komputer, odgrywać niepożądane dźwięki, spowodować wolniejszą pracę komputera, kraść informacje znajdujące się na dysku. Jednym z groźnych wirusów jest wirus nazwany koniem trojańskim, będący programem śledzącym twoje działania i pozwalający na kontrolowanie twojego komputera innym osobom. Drugim, równie popularnym wirusem, jest tzw. robak, czyli program tworzący własne kopie. Jego działanie skutkuje, przede wszystkim, zmniejszaniem na dysku miejsca, które możesz wykorzystać na swoje potrzeby.</p>
</div>
<div id="s3">
<h2> Porady </h2>
<div class="col_1">
<p><h3>Nie ufaj osobom poznanym w sieci! </h3>Nigdy nie można w 100% zaufać komuś poznanemu w sieci. Nie spotykaj się z osobami poznanymi w internecie. O propozycjach spotkania od internetowych znajomych informuj rodziców.</p>
<p><h3>Zadbaj o swój wizerunek. </h3>Jeśli publikujesz w sieci swoje zdjęcia, zadbaj, by widzieli je tylko Twoi znajomi. Nie umieszczaj w sieci zdjęć, które mogą Ci zaszkodzić dziś lub za jakiś czas.</p>
<p><h3>Korzystaj z umiarem z internetu! </h3>Zbyt długie korzystanie z komputera, tabletu czy smartfona może zaszkodzić Twojemu zdrowiu i pogorszyć kontakty ze znajomymi.</p>
</div>
<div class="col_2">
<p><h3>Chroń swoją prywatność!</h3>Nie podawaj swoich danych osobowych, takich jak: imię, nazwisko, numer telefonu czy adres domowy.</p>
<p><h3>Szanuj innych w sieci! </h3>Pamiętaj, by traktować innych z szacunkiem. Swoje zdanie wyrażaj, nie obrażając nikogo. Nie reaguj agresją na agresję.</p>
<p><h3>Mów, jeśli coś jest nie tak! </h3>W sytuacji, kiedy ktoś lub coś Cię w internecie zaniepokoi lub wystraszy, koniecznie opowiedz o tym rodzicom lub innej zaufanej osobie dorosłej. Możesz w takiej sytuacji skontaktować się z Telefonem Zaufania dla Dzieci i Młodzieży, dzwoniąc pod bezpłatny numer 116 111.</p>
</div>
</div>
<div id="s4">
<h2> Zabezpieczenia </h2>
<h3>Jak chronić swoje dane osobowe?</h3>
<ul>
<li>Uważaj na to co i komu udostępnisz o sobie w Internecie</li>
<li>Nie zostawiaj dokumentów w zastaw</li>
<li>Nie podawaj danych przez telefon</li>
<li>Uważaj na różne formularze, poprzez które udostępniasz dane</li>
<li>Nie wyrzucaj danych na śmietnik, dopóki ich nie zniszczysz</li>
<li>Usuwaj trwale dane z nośników</li>
<li>Używaj programów chroniących komputer</li>
</ul>
</div>
</div>
</body>
</html>
body{
background-color: rgb(34, 34, 34);
padding: 0;
margin: 0;
overflow: hidden;
}
.main{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
overflow: hidden;
}
.background{
position: relative;
}
.background:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("https://www.armytimes.com/resizer/f8leEneOMG7mTS4vucX_Uyiu0bU=/1200x0/filters:quality(100)/arc-anglerfish-arc2-prod-mco.s3.amazonaws.com/public/YU7KHDITR5HJ7IDCT7ZH5OVLFM.jpg");
background-size: 100% 130vh;
background-position: 0px -130px;
width: 100%;
height: 100%;
opacity : 0.8;
z-index: -1;
}
.to_center{
opacity: 1;
}
h1{
font-family: 'Teko', sans-serif;
font-size:100px;
margin-bottom: 50px;
line-height: 100px;
color: red;
text-align: center;
margin-top: 0px;
text-shadow:
1px 1px 100px rgba(0, 0, 0, 0.5),
-1px -1px 100px rgba(0, 0, 0, 0.5),
-1px 1px 100px rgba(0, 0, 0, 0.5),
1px -1px 100px rgba(0, 0, 0, 0.5);
}
h1 > a{
text-decoration: none;
color: red;
}
ul{
padding: 0;
display: flex;
justify-content: center;
}
li{
width: 250px;
height: 50px;
margin: 20px;
float: left;
border: solid 4px rgb(255, 0, 0);
border-radius: 7px;
list-style-type: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
overflow: hidden;
position: relative;
}
/*CIEMNE TŁO NA PRZYCISKACH*/
li::after{
background-color: rgba(0, 0, 0, 0.5);
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
z-index: -2;
transform: translate(-50%,-50%);
}
/*ANIMACJA PRZYCISKU*/
li::before{
background-color:red;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 200%;
z-index: -1;
transform: translate(-50%,-50%);
transition: all 0.5s ease;
}
li:hover::before{
width: 150%;
}
ul > a{
text-decoration: none;
color: white;
font-family: 'Bungee', cursive;
font-size: 20px;
z-index: 5;
}
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
/* display: grid;
height: 100%;
place-items: center;
text-align: center; */
background: linear-gradient(25deg, rgba(251,3,3,1) 0%, rgba(29,29,29,1) 81%);
background-repeat: no-repeat;
height: 100vh;
}
.logo_and_nav{
display: grid;
height: 25%;
place-items: center;
text-align: center;
}
h1{
font-family: 'Teko', sans-serif !important;
font-size: 80px;
margin-bottom: 0px;
line-height: 100px;
color: rgb(235, 26, 26);
text-align: center;
margin-top: 20px;
text-shadow:
1px 1px 15px rgba(0, 0, 0, 0.5),
-1px -1px 15px rgba(0, 0, 0, 0.5),
-1px 1px 15px rgba(0, 0, 0, 0.5),
1px -1px 15px rgba(0, 0, 0, 0.5);
}
h1 > a{
text-decoration: none;
color: rgb(235, 26, 26);
}
.wrapper{
user-select: none;
height: 60px;
width: 900px;
background: rgb(41, 41, 41);
line-height: 60px;
border-radius: 50px;
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}
.wrapper nav{
position: relative;
display: flex;
}
.wrapper nav label{
flex: 1;
width: 100%;
z-index: 1;
cursor: pointer;
}
.wrapper nav label a{
position: relative;
z-index: -1;
color: #e4e4e4;
font-size: 20px;
font-weight: 500;
text-decoration: none;
transition: color 0.6s ease;
font-family: 'Bungee', cursive;
font-size: 19px;
}
.wrapper nav #violence:checked ~ label.violence a,
.wrapper nav #viruses:checked ~ label.viruses a,
.wrapper nav #advice:checked ~ label.advice a,
.wrapper nav #security:checked ~ label.security a{
color: #fff;
}
.wrapper nav label a i{
font-size: 25px;
margin: 0 7px;
}
.wrapper nav .tab{
position: absolute;
height: 100%;
width: 25%;
left: 0;
bottom: 0;
z-index: 0;
border-radius: 50px;
background: linear-gradient(45deg, #db0d0d 20%,#000 80%);
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* transition: 0.4s ease-in-out; */
}
.wrapper nav #violence:checked ~ .tab
{
left: 0%;
}
.wrapper nav #viruses:checked ~ .tab
{
left: 25%;
}
.wrapper nav #advice:checked ~ .tab
{
left: 50%;
}
.wrapper nav #security:checked ~ .tab
{
left: 75%;
}
/*
.wrapper nav #violence:hover ~ .tab
{
left: 0% !important;
}
.wrapper nav #viruses:hover ~ .tab
{
left: 25% !important;
}
.wrapper nav #advice:hover ~ .tab
{
left: 50% !important;
}
.wrapper nav #security:hover ~ .tab
{
left: 75% !important;
}
*/
.wrapper nav input{
display: none;
}
/****************** SLAJDY *****************/
.slajd{
text-align: center;
color: white;
width: 100%;
margin-top: 5px;
}
h2{
font-size: 60px;
margin-bottom: 15px;
margin-top: 10px;
column-span: all;
}
#s3 {
display: block;
}
#s2,#s1,#s4 {
display: none;
}
#s1, #s2, #s4{
width: 60%;
font-size: 23px;
align-items: center;
margin: auto;
transition: 0.1s ease-in-out;
}
#s3{
/* columns: 350px 2;
align-items: center; */
position: relative;
}
p{
/* border: 1px solid black; */
margin-top: 0;
margin: 5px;
}
h3{
margin-bottom: 7px;
}
.col_1 > h3{
text-align: right;
}
.col_1, .col_2{
width: 33%;
display: inline-block;
text-align: justify;
}
.col_1{
position: absolute;
left: 10%;
}
.col_2{
position: absolute;
left: 55%;
}
#s4 ul{
list-style: none;
}
