Søg
Avatar billede thomasfricke Juniormester
06. september 2018 - 02:26 Der er 9 kommentarer og
1 løsning

onClick (Ændre css på div, der er efter onClick)


<div id="btn" onclick="showText();">Klik her</div>
<div id="infoText" style="display: none;">Besked vises</div>

<script>
function showText(){
  ******
}
</script>


### Function showText() ###
Hvordan for jeg function til at ændre style på id="infoText" til display: block; ???

--- Noget i stil med $("#btn").div.after.change.css (display : block;) ---
Avatar billede Rune1983 Ekspert
06. september 2018 - 07:28 #1
<script>
function showText()
{
    document.getElementById("infoText").style.display = "block";
}
</script>
Avatar billede Slater Ekspert
06. september 2018 - 07:57 #2
Eller når du alligevel åbenbart bruger jQuery:

$('#btn').click(function() {
  $('#infoText').show();
});
Avatar billede thomasfricke Juniormester
06. september 2018 - 09:28 #3
Vil det ikke ændre ALLE der hedder #infoText ???
Avatar billede Rune1983 Ekspert
06. september 2018 - 09:33 #4
Det er vist ikke så godt at have flere med samme id.
Så skal de adskilles fra hinanden.
Fx.
<script>
function showText(x)
{
    document.getElementById(x).style.display = "block";
}
</script>
<div id="btn" onclick="showText('infoText01');">Klik her</div>
<div id="infoText01" style="display: none;">Besked vises</div>
<div id="btn" onclick="showText('infoText02');">Klik her</div>
<div id="infoText02" style="display: none;">Besked vises</div>
<div id="btn" onclick="showText('infoText03');">Klik her</div>
<div id="infoText03" style="display: none;">Besked vises</div>
Avatar billede thomasfricke Juniormester
06. september 2018 - 09:47 #5
derfor jeg søgte noget i stil med " .div.after "
Avatar billede Rune1983 Ekspert
06. september 2018 - 12:55 #6
Prøv lige dette eksempel af og se om det ikke kan tilpasset dit kode.

<div style="width: 100%;">
            <style>
                .hidden>div {
                    display:none;
                }
               
                .visible>div {
                    display:block;
                }
            </style>
            <div style="width: 100%;" class="text_container">
                <h3>Nummer 1</h3>
                <div><!--div that we want to hide-->
                    <p>Nummer 1 tekst</p>
                </div>
            </div>
            <div style="width: 100%;" class="text_container">
                <h3>Nummer 2</h3>
                <div><!--div that we want to hide-->
                    <p>Nummer 2 tekst</p>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function(){
                    $('.text_container').addClass("hidden");
           
                    $('.text_container').click(function() {
                        var $this = $(this);
           
                        if ($this.hasClass("hidden")) {
                            $(this).removeClass("hidden").addClass("visible");
           
                        } else {
                            $(this).removeClass("visible").addClass("hidden");
                        }
                    });
                });
            </script>
        </div>
Avatar billede Slater Ekspert
06. september 2018 - 13:16 #7
Eller nemmere med jQuery:

<div class="btn" onclick="showText();">Klik her</div>
<div class="infoText" style="display: none;">Besked vises</div>

$('.btn').click(function() {
  $(this).find('+ .infoText').toggle();
});
Avatar billede Slater Ekspert
06. september 2018 - 13:17 #8
Hov, onclick skal bare fjernes.
Avatar billede Rune1983 Ekspert
06. september 2018 - 14:25 #9
For at mit eksempel ovenfor virker skal følgende være i header
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
Avatar billede thomasfricke Juniormester
08. september 2018 - 08:45 #10
Det blev Rune's med forskellige id...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 3 27/04/202620:09 28/04/202621:05
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:42 Access Import af csv fil - forkerte datatyper Af Henrik Berg Hansen i Andet software
I går 19:37 Hente CSV fil, indsætte CSV data i TABEL for JAVASCRIPT Af snestrup2000 i Programmeringsværktøjer
I går 12:23 Facebook Af hkv i Sociale medier
I går 11:38 JAVASCRIPT omdan ekstern variabel til søjleværdi .. Af snestrup2000 i Programmeringsværktøjer
I går 09:50 jeg mangler hjælp til opsætning af shop og Google ADS Af Hightech i Webhotel
White papers
Flere white papers »