Link ändern Objekt in div

ich folgende html haben: Link ändern Objekt in div

<div class="container"> 

    <header> 
     <object type="text/html" data="nav_bar/navigation.html" style="width:1300px; height:70px;"></object> 
    </header> 

    <nav> 
     <object type="text/html" data="side_menu/dates.html" style="width:300px; height:500px;"></object> 
    </nav> 

    <article> 
     <object type="text/html" data="side_main/introduction.html" style="width:1002px; height:500px;"></object> 
    </article> 

</div>

die Datei dates.html in Unterordner side_menu ist ein Menü. Ich möchte eines seiner Taste ../side_main/main_side.html

Derzeit lädt es die Seite in der nav div (_self) standardmäßig das Objekt in dem Artikel Element zu ändern. Ich habe das Ziel _top und _parent geändert und hält das Laden der Seite als _self

das Layout der Seite mit CSS gemacht wird:

div.container { 
     width: 100%; 
     border: 1px solid gray; 
     background-color: white; 
    } 

    header, footer { 
     padding: 0em; 
     color: white; 
     background-color: black; 
     clear: left; 
    } 

    footer 
    { 
     padding: 1em; 
     text-align: center;} 

    nav { 
     float: left; 
     max-width: 300px; 
     margin: 0; 
     padding: 0em; 
     overflow:hidden; 
    } 

    article { 
     margin-left: 1px; 
     border-left: none; 
     padding: 0em; 
     overflow:hidden; 
    } 
</style>

Ich bin kein Programmierer oder Web-Entwickler. Ich schätze jede Lösung, die so einfach wie möglich ist. Dank

Quelle

2016-08-29 jcorzo

Ich denke, dass Sie dies programmieren müssen. Was benutzt du? jQuery, Vanille JS oder etwas anderes? – Knostradamus

Ich könnte JS verwenden, aber ich versuche es so einfach wie möglich zu halten. es funktioniert gut mit Frames, aber überall heißt es, dass es keine gute Idee ist, sie zu verwenden. Ich fing an, Iframes zu betrachten, aber sie ich lese, dass CSS der Weg zu gehen ist – jcorzo

Sie müssen das Datenattribut in Ihrem Objekt ändern .. CSS kann dies nicht tun. Ich würde vorschlagen, dass Sie ein Plunk dafür machen. Wenn Sie es bauen, werden sie kommen. – Knostradamus

nicht sicher, ob dies der beste Weg ist, aber es funktioniert: ich das andere Objekt innerhalb des gleichen DIV hinzugefügt und eine ID für jedes

<article> 
      <object type="text/html" id="intro" data="side_main/introduction.html" style="width:1002px; height:500px;"></object> 
      <object type="text/html" id="dec7" data="side_main/main_side.html" style="width:1002px; height:500px;"></object> 
</article>

auf der Schaltfläche Objekt hinzufügen ich ein Onclick-Ereignis hinzugefügt, die passieren eine Reihe an eine Funktion

<a href="#" onclick="show_div(1)"><December 7</a>

die Funktion die Anzeige jedes DIV ändert sich in Abhängigkeit von der Anzahl an sie übergeben

<script type="text/javascript"> 
     function show_div(arg) { 
      document.getElementById("intro").style.display = "none"; 
      document.getElementById("dec7").style.display = "none"; 
      if (arg == 1) { 
      document.getElementById("dec7").style.display = "block"; 
      } else { 
      document.getElementById("intro").style.display = "block"; 
      } 
     } 
</script>

Quelle

2016-08-31 18:39:23 jcorzo

Link ändern Objekt in div

Antwort

Verwandte Themen