Witam was jak mozna zrobić menu obrazkowe tzn klikam na obrazek i wyjeżdża mi pod nim tekst. Chciałbym aby obrazek był normalnie wyświetlany i po kliknięciu na inny obrazek tekst z poprzedniego znikał i zostawał zastępowany nowym. Przykład na zdj. ![[Obrazek: Bez_nazwy-1.jpg]](http://wstaw.org/m/2016/09/12/Bez_nazwy-1.jpg)
Po kliknięciu na obrazek pojawia się treść
Może to http://www.kurshtml.edu.pl/skrypty/skryp...ijane.html http://www.kurshtml.edu.pl/skrypty/rozwijane_menu.html
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje ~ Divir 29.07.2019 16:08
HTML:
CSS:
JS:
<div id="pierwszy">1 obrazek</div>
<div id="drugi">2 obrazek</div>
<div id="trzeci">3 obrazek</div>
<br style="clear: both;">
<div id="pierwszy_tekst">tekst 1</div>
<div id="drugi_tekst">tekst 2</div>
<div id="trzeci_tekst">tekst 3</div>CSS:
#pierwszy_tekst, #drugi_tekst, #trzeci_tekst {
display: none;
}JS:
<script>
$(document).ready(function() {
$('#pierwszy, #drugi, #trzeci').click(function() {
hideText()
var checkId = $(this).attr('id')
console.log(checkId + '_tekst')
$('#' + checkId + '_tekst').slideDown(500)
})
function hideText() {
$('#pierwszy_tekst, #drugi_tekst, #trzeci_tekst').css('display','none')
}
});
</script>
Możesz zobaczyć bo z obrazkami nie działa a z tekstem co ty dałeś w przykładzie działało
<!DOCTYPE html>
<html lang="pl">
<head>
<title>KLAART</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/style-mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/menu.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<?php include("./templates/menu.php"); ?>
<div class="container-fluid text-center">
<div class="row">
<div id="pierwszy">
<div id="nowe_wnetrza" class="col-sm-4 img-height img-projekty-menu img-text-projekty-menu" style="background: url(../images/box/img-8.jpg) no-repeat center center;">
<div class="img-container">
<h1>Nowe wnętrza</h1></br>
<p>w centrum Warszawy</p>
</div>
</div>
</div>
<div id="drugi">
<div id="nowe_wnetrza2" class="col-sm-4 img-height img-projekty-menu img-text-projekty-menu" style="background: url(../images/box/img-8.jpg) no-repeat center center;">
<div class="img-container">
<h1>Nowe wnętrza</h1></br>
<p>w centrum Warszawy</p>
</div>
</div>
</div>
<div id="trzeci">
<div id="nowe_wnetrza2" class="col-sm-4 img-height img-projekty-menu img-text-projekty-menu" style="background: url(../images/box/img-8.jpg) no-repeat center center;">
<div class="img-container">
<h1>Nowe wnętrza</h1></br>
<p>w centrum Warszawy</p>
</div>
</div>
</div>
<br style="clear: both;">
<div id="pierwszy_tekst">
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
</br></br>
<div class="row">
<div class="col-sm-12">
<h4>Mieszkanie na wynajem</h4>
<h3>Najistotniejszym elementem podczas tego projektu było przeznaczenie mieszkania do wynajmu.</h3>
<p>Nieduży budżet nie przeszkodził w uzyskaniu fajnego efektu. Zastosowano trwałe, choć niedrogie materiały. Mieszkanie jest niewielkie, ale bardzo funkcjonalne, idealne dla pary. Jasne ściany, podłoga i meble sprawiają wrażenie większej przestrzeni. Ponadto cały remont od stanu deweloperskiego do tego widocznego na zdjęciach udało się przeprowadzićw ciągu miesiąca.</p></br>
</div>
</div>
</br></br>
</div>
</div>
<div id="drugi_tekst">
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
</br></br>
<div class="row">
<div class="col-sm-12">
<h4>Mieszkanie na wynajem</h4>
<h3>Najistotniejszym elementem podczas tego projektu było przeznaczenie mieszkania do wynajmu.</h3>
<p>Nieduży budżet nie przeszkodził w uzyskaniu fajnego efektu. Zastosowano trwałe, choć niedrogie materiały. Mieszkanie jest niewielkie, ale bardzo funkcjonalne, idealne dla pary. Jasne ściany, podłoga i meble sprawiają wrażenie większej przestrzeni. Ponadto cały remont od stanu deweloperskiego do tego widocznego na zdjęciach udało się przeprowadzićw ciągu miesiąca.</p></br>
</div>
</div>
</br></br>
</div>
</div>
<div id="trzeci_tekst">
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
</br></br>
<div class="row">
<div class="col-sm-12">
<h4>Mieszkanie na wynajem</h4>
<h3>Najistotniejszym elementem podczas tego projektu było przeznaczenie mieszkania do wynajmu.</h3>
<p>Nieduży budżet nie przeszkodził w uzyskaniu fajnego efektu. Zastosowano trwałe, choć niedrogie materiały. Mieszkanie jest niewielkie, ale bardzo funkcjonalne, idealne dla pary. Jasne ściany, podłoga i meble sprawiają wrażenie większej przestrzeni. Ponadto cały remont od stanu deweloperskiego do tego widocznego na zdjęciach udało się przeprowadzićw ciągu miesiąca.</p></br>
</div>
</div>
</br></br>
</div>
</div>
</div>
</div>
<?php include("./templates/footer.php"); ?>
<script src="js/scrollreveal.min.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>
Usuń klasę hidden-panel z tych divów:
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
Ok działa. Miałbym jeszcze jedną małą prośbę mógłbyś dorobić warunek, że nie reaguje aktywny obrazek http://szablony.freeware.info.pl/background.html na ponowne naciśnięcie (teraz się od nowa rozwija tekst na kliknięciu) oraz dodanie klasy do aktywnego obrazka ?
JS:
$(document).ready(function() {
$('#pierwszy, #drugi, #trzeci').click(function() {
var checkId = $(this).attr('id')
var correctDiv = $('#' + checkId + '_tekst')
if (correctDiv.css('display') != 'block') {
hideTextDeleteClass()
correctDiv.slideDown(500)
.addClass('active')
}
})
function hideTextDeleteClass() {
$('#pierwszy_tekst, #drugi_tekst, #trzeci_tekst').css('display','none')
.removeClass('active')
}
});
Mam prośbę chciałem prosić o małą przeróbkę. Skrypt dodaje klase active do bloczka który się wysuwa, a ja bym chciał żeby ta klasa active dodawała się do diva który powoduje wysunięcie się tego bloczka z tekstem.
$(document).ready(function() {
$('#pierwszy, #drugi, #trzeci').click(function() {
var $this = $(this)
var checkId = $this.attr('id')
var correctDiv = $('#' + checkId + '_tekst')
if (correctDiv.css('display') != 'block') {
$('#pierwszy_tekst, #drugi_tekst, #trzeci_tekst').css('display','none')
correctDiv.slideDown(500)
$this.addClass('active')
$('#pierwszy, #drugi, #trzeci').not($this).removeClass('active')
}
})
});Użytkownicy przeglądający ten wątek:
3 gości