1. 首頁
  2. 問答
  3. 想要改變div時點擊圓形圖像

想要改變div時點擊圓形圖像

2016-08-24 57 views
1

請你幫我解決這個障礙。想要改變div時點擊圓形圖像

我有這個網站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>

來源

2016-08-24 Svetlana Jurcov

+0

鏈接無法打開？問題是呃。 「想改變div」在哪？ –

+0

看看這個：http://stackoverflow.com/questions/25735512/replace-div-content-onclick – Oncodeeater

+0

你想顯示和隱藏功能嗎 –

回答

0

有很多方法可以做這樣的事情。您可以在各種庫中找到很多實現。即使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'); 
});

來源

2016-08-24 19:37:17 Lansana

相關問題

 相關問題