你能帮我解决这个障碍吗？
我有这个网站here我希望当我单击圆形图像时我的红色 div 会发生变化。
我已经从我拥有的另一个网站复制了代码!
这是该部分的代码:
<div class="clearfix colelem" id="pu79"><!-- group -->
<div class="browser_width grpelem" id="u79"><!-- group -->
<div class="clearfix" id="u79_align_to_page">
<a class="anchor_item grpelem" id="band"></a>
<div class="clearfix grpelem" id="u80-4"><!-- content -->
</div>
</div>
</div>
<div class="PamphletWidget clearfix grpelem" id="pamphletu323"><!-- none box -->
<div class="ThumbGroup clearfix grpelem" id="u324"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u325"><!-- simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u379"><!-- simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u388"><!-- simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u390"><!-- simple frame --></div>
</div>
<div class="popup_anchor">
<div class="Thumb popup_element rounded-corners" id="u3911"><!-- simple frame --></div>
</div>
</div>
<div class="popup_anchor" id="u328popup">
<div class="ContainerGroup clearfix" id="u328"><!-- stack box -->
<div class="Container clearfix grpelem" id="u330"><!-- group -->
<div class="museBGSize grpelem" id="u348"><!-- simple frame --></div>
<div class="clearfix grpelem" id="pu355-4"><!-- column -->
<div class="clearfix colelem" id="u355-4"><!-- content -->
<p>LORENZO-CRISTIAN</p>
</div>
<div class="clearfix colelem" id="u357-4"><!-- content -->
<p>MAGICIAN-ILUZIONIST</p>
</div>
<div class="clearfix colelem" id="u356-4"><!-- content -->
<p>Izvorul Inepuizabil de creatie artistica, omul care mereu viseaza, planifica si duce visele la indeplinire.<br/>Realizatorul spectacolului, iluziilor si efectelor speciale… </br/>The Master!</p>
</div>
<a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/MagicianulLorenzoCristian?ref=hl"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>
<div class="clearfix colelem" id="pu358"><!-- group -->
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u380"><!-- group -->
<div class="museBGSize grpelem" id="u392"><!-- simple frame --></div>
<div class="clearfix grpelem" id="pu393-4"><!-- column -->
<div class="clearfix colelem" id="u393-4"><!-- content -->
<p>ANGELINA</p>
</div>
<div class="clearfix colelem" id="u395-4"><!-- content -->
<p>ASISTENTA</p>
</div>
<div class="clearfix colelem" id="u394-4"><!-- content -->
<p>Arta de a se lasa fotografiata… e ceva nativ pentru ea. Scena si lumina reflectoarelor lucesc mai tare dupa aparitia ei misterioasa. VISUL MEU o incadreaza intr-o poveste de dragoste nemaivazuta, alaturi de magician.</p>
</div>
<a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/pages/Magic-Aly/1408354842777607?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>
<div class="clearfix colelem" id="pu396"><!-- group -->
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u389"><!-- group -->
<div class="museBGSize grpelem" id="u399"><!-- simple frame --></div>
<div class="clearfix grpelem" id="pu400-4"><!-- column -->
<div class="clearfix colelem" id="u400-4"><!-- content -->
<p>AN'TONIKA</p>
</div>
<div class="clearfix colelem" id="u402-4"><!-- content -->
<p>ALL-IN-ONE</p>
</div>
<div class="clearfix colelem" id="u401-4"><!-- content -->
<p>Stie tot! face tot! iar personalitatea ei tonica o face de neinlocuit in echipa!<br/>Puterea ei o face sa ramana in picioare oricate responsabilitati i-ai atribuit:<br/>- backstage, artist, costume, make-up… orice!</p>
</div>
<a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/antonela.knigge?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>
<div class="clearfix colelem" id="pu403"><!-- group -->
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u391"><!-- group -->
<div class="museBGSize grpelem" id="u407"><!-- simple frame --></div>
<div class="clearfix grpelem" id="pu407-4"><!-- column -->
<div class="clearfix colelem" id="u407-4"><!-- content -->
<p>VANESSA</p>
</div>
<div class="clearfix colelem" id="u409-4"><!-- content -->
<p>ASISTENTA</p>
</div>
<div class="clearfix colelem" id="u408-4"><!-- content -->
<p>Prea pasionata de dans sportiv si street dance… a reusit sa faca performanta. Rasplata stand in diverse cupe si premii obtinute la Campionatele Nationale.<br/>In VISUL MEU are rolul de a levita si de a se lasa taiata in 3, de un spectator.</p>
</div>
<a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/magicvanessa?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>
<div class="clearfix colelem" id="pu410"><!-- group -->
</div>
</div>
</div>
<div class="Container invi clearfix grpelem" id="u391"><!-- group -->
<div class="museBGSize grpelem" id="u406"><!-- simple frame --></div>
<div class="clearfix grpelem" id="pu407-4"><!-- column -->
<div class="clearfix colelem" id="u407-4"><!-- content -->
<p>ROBO</p>
</div>
<a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/CristianNovac?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>
<div class="clearfix colelem" id="u409-4"><!-- content -->
<p>DANSATOR</p>
</div>
<div class="clearfix colelem" id="u408-4"><!-- content -->
<p>Recunoscut a fi cel mai original dansator de Electric Boogie, datorita inventarii unui stil propriu. Acest stil sincronizeaza perfect miscarile cu sistemele de lumini pe care s-i le construieste singur. Mai mult are abilitatea de a juca orice rol pe care Lorenzo il gaseste.</p>
</div>
<div class="clearfix colelem" id="pu410"><!-- group -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
有很多方法可以做到这样的事情。您可以在各种库中找到大量实现。甚至 Bootstrap 也内置了此功能。
话虽这么说，我只是很快地定制了一些东西供您查看和玩。请参阅Fiddle示例并单击红色圆圈查看他们如何更改下面的内容。
HTML:
<ul class="circles">
<li class="circle active" data-toggle="1"></li>
<li class="circle" data-toggle="2"></li>
<li class="circle" data-toggle="3"></li>
<li class="circle" data-toggle="4"></li>
<li class="circle" data-toggle="5"></li>
</ul>
<ul class="boxes">
<li class="box active" data-toggled-by="1">
<h1>Box 1</h1>
</li>
<li class="box" data-toggled-by="2">
<h1>Box 2</h1>
</li>
<li class="box" data-toggled-by="3">
<h1>Box 3</h1>
</li>
<li class="box" data-toggled-by="4">
<h1>Box 4</h1>
</li>
<li class="box" data-toggled-by="5">
<h1>Box 5</h1>
</li>
</ul>
CSS:
ul {
list-style-type: none;
}
li.circle {
display: inline-block;
border: 2px solid red;
width: 50px;
height: 50px;
background: red;
border-radius: 50px;
margin-right: 25px;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
cursor: pointer;
}
li.circle:hover {
opacity: .5;
}
li.circle.active {
border-color: black;
}
li.box {
width: 90%;
display: none;
background: white;
height: 300px;
display: none;
}
li.box.active {
display: block;
}
JavaScript(jQuery):
$('.circle').click(function() {
// De-activate previously active circle
$('.circle.active').removeClass('active');
// Activate clicked circle
$(this).addClass('active');
// Get toggle ID of clicked circle
var toggleId = $(this).data('toggle');
// De-activate previously active box
$('.box.active').removeClass('active');
// Activate box with corresponding toggle ID
$('.box[data-toggled-by="' + toggleId + '"]').addClass('active');
});
关于javascript - 点击圆形图像时想要更改 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39129072/