Pasukite du elementus, matomus / paslėptus toje pačioje div

Turiu problemų, kai vienas elementas yra įjungtas, o kitas yra toje pačioje div. Atrodo, kad aš sukuriu objektą, kuris turėtų tai padaryti, ir kai jį paspaudžiu, jis slepia visą dd, o ne vieną elementą ir vieną. Ką dar reikia pridėti, kad šis darbas būtų atliktas?

CSS

 #test1 { width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:none; } #test2 { width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:block; } .mydiv { } #test { width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; } #labor{ float:left; width:38px; height:125px; } #odc { float:left; width:32px; height:125px; } 

HTML

  <div id="test"> <div class="mydiv" id="test1"> <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script> <div id="line3ChartContainer" style="display:normal"> <asp:Literal ID="Literal9" Visible="true" runat="server"></asp:Literal></div> </div> <div class="mydiv" id="test2"> <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script> <div id="popChartContainer" style="display:normal"> <asp:Literal ID="Literal3" Visible="true" runat="server"></asp:Literal></div> </div> </div> <img src="../../images/labortab.png" id="labor" onmousedown="document.test1.visibility='false';document.test2.visibility='true';"/> <img src="../../images/odctab.png" id="odc" onmousedown="document.test1.visibility='true';document.line3ChartDiv.visibility='false';"/> 

Tikiuosi, kad tai atrodo geriau.

-2
18 июля '13 в 16:50 2013-07-18 16:50 Keithas įsikūręs liepos 18 d. 13 val. 4:50 2013-07-18 16:50
ответ 1 atsakymas

Dažniausias metodas

Turėtumėte naudoti jQuery, o ne gryną javascript . Atlikite šiuos veiksmus:

  • Sukurkite klasę, pavadintą paslėpta ir jos viduje, pridėkite stiliaus vertės rodinį: nėra
  • Jei norite pakeisti matomumą, naudokite toggleClass arba addClass / removeClass .

Čia yra jQuery kodo pavyzdys:

 $(function(){ $('#labor').click(function(){ $('div[name=test1]').addClass('hidden'); $('div[name=test2]').removeClass('hidden'); }); $('#odc').click(function(){ $('div[name=test1]').removeClass('hidden'); $('div[name=test2]').addClass('hidden'); }); }); 

Ir čia yra demonstracija (bandžiau naudoti didžiąją dalį jūsų kodo, todėl yra trūkstamų vaizdų):


Kaip pagreitinti „JavaScript“ kodą

Gera praktika yra sukurti klasę, kuri paslėptų jūsų elementus puslapio viduje (pvz., „Paslėpti“) ir naudokitės tokiais tikslais visame puslapyje. Konkrečių CSS stilių vertės perjungimas yra mažiau efektyvus ir beveik visada rekomenduojama keisti klases.

Čia yra labai įdomi „Google“ šriftų inžinieriaus Nicholas Zako paskaita apie „JavaScript“ optimizavimą (tai atvėrė mano akis į keletą „ JScript“ dalykų):


Kaip įgyvendinti jQuery

Norėdami naudoti šiuos (ir daugelį kitų) jQuery metodų, pirmiausia turite įdiegti jQuery į savo programą. Deja, naujokams tai gali atrodyti šiek tiek didžiulis.

„JQuery“ diegimo paslaptis.

Paslaptis yra suprasti, kad jQuery įdiegimas iš tikrųjų neapima įrengimo. Viskas, kas turi įvykti, kad jQuery galite naudoti savo programoje - tai nuoroda į jQuery kodo failą. Taryba . JQuery kodo failas lengvai sukuriamas kopijuojant / įklijuojant jQuery kodą į tekstinį failą ir keičiant jo plėtinį į .js . Tada, norėdami nurodyti jQuery kodą, tiesiog įdėkite nuorodą į savo poziciją. Čia pateikiamas vienos iš mano svetainės antraštių pavyzdys:

2019

1
18 июля '13 в 17:39 2013-07-18 17:39 atsakymas pateikiamas Lopsided liepos 18, 13, 5:39 2013-07-18 17:39

Kiti klausimai apie „ žymes arba „ Klauskite“