Erstmal Hallo miteinander,
ich bin ziemlich neu im Javascript und ich helfe einen bekannten bei einer Webseite, leider meine Kenntnisse reichen nicht aus, deswegen suche ich ein wenig Hilfe hier.
Es tut mir Leid wenn ich mich nicht richtig ausdrücken kann, bin dabei Deutsch zu lernen
ich habe einen Div mit 5 Bilder. Jedes Bild solltet einen unterschiedlichen Div darunter anzeigen. (img 1 sollte div id=clubOneDays anzeigen, img 2 -->clubTwoDays usw.) Wenn z.B: Bild 1 ausgewählt werden muss dann wird das div clubOneDays angezeigt und alle andere divs abgeblendet, wenn man gleich danach Bild 2 auswählt sollte das div clubDaysTwo angezeigt, clubDaysOne ausgeblendet und das alle für die restlichen 3 divs....
ich würde gern alles das mit Javascript (jquery geht auch, habe aber damit noch weniger erfahrung)
Vielen Dank im voraus.
ich bin ziemlich neu im Javascript und ich helfe einen bekannten bei einer Webseite, leider meine Kenntnisse reichen nicht aus, deswegen suche ich ein wenig Hilfe hier.
Es tut mir Leid wenn ich mich nicht richtig ausdrücken kann, bin dabei Deutsch zu lernen
ich habe einen Div mit 5 Bilder. Jedes Bild solltet einen unterschiedlichen Div darunter anzeigen. (img 1 sollte div id=clubOneDays anzeigen, img 2 -->clubTwoDays usw.) Wenn z.B: Bild 1 ausgewählt werden muss dann wird das div clubOneDays angezeigt und alle andere divs abgeblendet, wenn man gleich danach Bild 2 auswählt sollte das div clubDaysTwo angezeigt, clubDaysOne ausgeblendet und das alle für die restlichen 3 divs....
ich würde gern alles das mit Javascript (jquery geht auch, habe aber damit noch weniger erfahrung)
Vielen Dank im voraus.
HTML:
<div class="ml-xl mr-xl">
<div class="row">
<ul class="portfolio-list sort-destination" data-sort-id="portfolio">
<li class="col-md-1-5 isotope-item brands">
<div class="portfolio-item">
<span class="thumb-info">
<span class="thumb-info-wrapper">
<img src="img/projects/project.jpg" class="img-responsive" alt="">
</span>
</span>
</div>
</li>
<li class="col-md-1-5 isotope-item medias">
<div class="portfolio-item">
<span class="thumb-info">
<span class="thumb-info-wrapper">
<img src="img/projects/project-1.jpg" class="img-responsive" alt="">
</span>
</span>
</div>
</li>
<li class="col-md-1-5 isotope-item logos">
<div class="portfolio-item">
<span class="thumb-info">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
</span>
</span>
</div>
</li>
<li class="col-md-1-5 isotope-item brands">
<div class="portfolio-item">
<span class="thumb-info">
<span class="thumb-info-wrapper">
<img src="img/projects/project-3.jpg" class="img-responsive" alt="">
</span>
</span>
</div>
</li>
<li class="col-md-1-5 isotope-item logos">
<div class="portfolio-item">
<span class="thumb-info">
<span class="thumb-info-wrapper">
<img src="img/projects/project-4.jpg" class="img-responsive" alt="">
</span>
</span>
</div>
</li>
</ul>
</div>
</div>
<div class="container" id="clubOneDays" style="width:1530px; display:block">
<div class="col-md-12">
<div class="row">
<ul class="portfolio-list">
<li class="col-md-2 col-sm-6 col-xs-12" >
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Montag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Dienstag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Mittwoch</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Donnerstag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Freitag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-3.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Samstag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-4.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Sonntag</span>
</span>
</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="container" id="ticketsClubOne" style="display:block">
<div class="row">
<div class="col-md-12">
<h4>Tickets</h4>
<table class="table table-bordered">
<tbody>
<tr>
<td style="width:20%" align="center">
</td>
<td style="Width:60%">
Description
</td>
<td style="width:20%" align="center">
<button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
Description 2
</td>
<td align="center">
<button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container" id="clubTwoDays" style="width:1530px; display:block">
<div class="col-md-12">
<div class="row">
<ul class="portfolio-list">
<li class="col-md-2 col-sm-6 col-xs-12" >
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Montag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Dienstag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Mittwoch</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Donnerstag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Freitag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-3.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Samstag</span>
</span>
</span>
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten">
<span class="thumb-info-wrapper">
<img src="img/projects/project-4.jpg" class="img-responsive" alt="">
<span class="thumb-info-title">
<span class="thumb-info-inner">Sonntag</span>
</span>
</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="container" id="ticketsClubTwo" style="display:block">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<h4>Tickets</h4>
<table class="table table-bordered">
<tbody>
<tr>
<td style="width:20%" align="center">
</td>
<td style="Width:60%">
Description 3
</td>
<td style="width:20%" align="center">
<button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
Description 4
</td>
<td align="center">
<button type="button" class="btn btn-primary mr-xs mb-sm">tickets</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Zuletzt bearbeitet: