Avatar billede tvilling53 Seniormester
15. marts 2020 - 19:39 Der er 9 kommentarer og
1 løsning

indsæt indhold i en <div>

Hej, jeg har prøvet at finde noget der kan give et input på hvordan man henter forskelleig indhold ind på en betemt plads alt efter hvilken link der bliver klikket på. Jeg har denne kode:

<body>
  <div class="box">
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Hjem</a>
        <div class="dropdown">
          <button class="dropbtn">Dropdown 1<i class="fa fa-caret-down"></i></button>
          <div class="dropdown-content">
            <a href="#">Link 1-1</a>
            <a href="#">Link 1-2</a>
            <a href="#">Link 1-3</a>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn">Dropdown2<i class="fa fa-caret-down"></i></button>
          <div class="dropdown-content">
            <a href="#">Link 2-1</a>
            <a href="#">Link 2-2</a>
            <a href="#">Link 2-3</a>
          </div>
        </div>
        <a href="#contact">Kontakt os</a>
        <a href="#about">Om </a>
        <a href="java script:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    ///Det hentede indhold skulle gerne vises her
  </div>
<script>
  function myFunction()
  { var x = document.getElementById("myTopnav");
    if (x.className === "topnav")
    { x.className += " responsive";
    }
    else
    { x.className = "topnav";
    }
  }
</script>
</body>
Håber at der er nogen der kan hjælpe.
VH Thomas V
Avatar billede Slater Ekspert
15. marts 2020 - 20:19 #1
Hvad er det du vil vise der og hvornår?
Avatar billede tvilling53 Seniormester
15. marts 2020 - 20:25 #2
Jeg forestiller mig at tekst og billeder findes på en side som ligger samme sted som index-fil og så er der dele af siden der skal vises alt efter hvilket link der trykkes på
Avatar billede Slater Ekspert
15. marts 2020 - 20:31 #3
Så leder du efter AJAX.

Der er en simpel guide her: https://www.w3schools.com/xml/ajax_intro.asp - der faktisk gør præcis hvad du skal bruge.

Prøv at læse det og se om det er nok. Hvis du går i stå eller ikke kan finde ud af at putte det ind i netop din kode, så fortæl hvor langt du nåede.
Avatar billede tvilling53 Seniormester
15. marts 2020 - 20:34 #4
Det prøver jeg...og foreløbig tak for input
Avatar billede olsensweb.dk Ekspert
16. marts 2020 - 11:14 #5
en ulempe ved ajax er at siden ikke kan indexeres af søgemaskiner (SEO), da de ikke kan se indhold der kommer fra JS mig bekendt


en anden løsning kunne være at tage en parameter med over i URLen (her page)
for at gører den mere seo venlig kun man lege med .htaccess https://www.google.com/search?q=.htaccess+nice+url


index.php
<?php
if (isset($_GET['page'])) {
$page = $_GET['page'];   
}
else{
$page = 'forside';   
}
?>

<!DOCTYPE html>
<html lang="da">
    <head>
        <title><?php echo $page ?></title>
        <meta charset="utf-8">       
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
<body>
  <div class="box">
    <div class="topnav" id="myTopnav">
      <a href="index.php?page=forside#home" class="active">Hjem</a>
        <div class="dropdown">
          <button class="dropbtn">Dropdown 1<i class="fa fa-caret-down"></i></button>
          <div class="dropdown-content">
            <a href="index.php?page=forside">Link 1-1</a>
            <a href="index.php?page=side1">Link 1-2</a>
            <a href="index.php?page=side2">Link 1-3</a>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn">Dropdown2<i class="fa fa-caret-down"></i></button>
          <div class="dropdown-content">
            <a href="index.php?side3">Link 2-1</a>
            <a href="index.php?side4">Link 2-2</a>
            <a href="index.php?side5">Link 2-3</a>
          </div>
        </div>
        <a href="index.php?page=forside#contact">Kontakt os</a>
        <a href="index.php?page=forside#about">Om </a>
        <a href="java script:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>   
        <div id="content">
          <!-- Begin page content -->
            <?php
            // Side indhold
            require_once $page.".php";
            // Side indhold
            ?>
            <!-- end content area -->
        </div>   
  </div>
        <script>
  function myFunction()
  { var x = document.getElementById("myTopnav");
    if (x.className === "topnav")
    { x.className += " responsive";
    }
    else
    { x.className = "topnav";
    }
  }
</script>
</body>   
</html>


forside.php

hej lille gris
<h2 id="home">gå dog hjem</h2>
<span id="contact">kontakt, fyr</span>
<div id="about">hvad skal jeg skrive om dette ??</div>


en masse fyld linjer
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.


side1.php
øf


demo https://olsensweb.dk/test/1032513/
alle filer https://olsensweb.dk/test/1032513/1032513.zip
Avatar billede olsensweb.dk Ekspert
16. marts 2020 - 11:36 #6
du bør også lave et array af de sider der er tilladt, som du checker op imod
https://stackoverflow.com/questions/21329515/php-getting-error-for-page-getpage/54395206
Avatar billede tvilling53 Seniormester
16. marts 2020 - 18:53 #7
Hej olsenweb.dk, din løsning virker perfekt, men kan det ikke laves så man ikke skal have side for hver a href men kan have al info på samme side, hvorfra man så henter den del man skal bruge.
Thomas V
Avatar billede tvilling53 Seniormester
16. marts 2020 - 18:54 #8
Forresten tak for hjælpen
Avatar billede olsensweb.dk Ekspert
16. marts 2020 - 20:15 #9
>men kan det ikke laves så man ikke skal have side for hver a href
nej, men du kan sagtens lave en one page, der indeholder alt, og så springe til den id dit link peger på, men du vil stadig kunne se det andet indhold, som de andre link referarer til.
en one page, er temelig data tung, (og os der betaler pr MB på mobilen bliver kede af det :-(, hvis vi besøger sådanne sider)

link
https://www.google.com/search?q=one+page+website+template
https://bootstrapmade.com/bootstrap-one-page-templates/
https://www.w3schools.com/css/css_rwd_templates.asp
https://www.w3schools.com/w3css/tryw3css_templates_band.htm

ellers er du nødt til at lave hver indholds side for sig, som du så indlæser enten via en:

URL parameter som vist i #5, data mæssigt tung, da hele siden skal indlæsses hver gang, kan indexeres af søgemaskiner, og kan opnå god SEO, ved bla "nice url"

<iframe> ikke supporteret fra og med HTML5, data mæssigt let, da kun indholdet i iframe'en indlæsses. kan ikke indexeres af søgemaskiner dårlig SEO
https://www.w3schools.com/tags/tag_iframe.asp

AJAX, kræver godt kendskab til JS, ikke beregnet til at hente HTML, selv om det virker, kun rå data, alt HTML formatering bør laves clientside (JS), der er ikke grund til at serveren spilder til på formatering, data mæssigt let, da det kun indholdet af div'en der bliver hentet og indlæst. kan ikke indexeres af søgemaskiner dårlig SEO
Avatar billede tvilling53 Seniormester
17. marts 2020 - 14:59 #10
Tak for info, så må det blive en side pr. href og så gøre via "nice url" , så endnu en gang mange tak for hjælpen
Thomas V
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester