split an HTML file

Asked

Viewed 1,413 times

0

I want to do something, but I don’t know how. Look at the code below (in html) Clicking the "H" button opens a text field just below it. So far so good, but what I wish was that this text field, which ended up opening when I clicked on "H", was written in another file html, not all in the same file. As if splitting this file html in two other files, but I don’t know how to do this while maintaining that same effect.

<!DOCTYPE html>
    <html>
    <head>

    <style type="text/css">
    .description{display:none;border-radius:10px;}
    .description:target{display:block;}
    .descriptions{margin:1.5em;}
    </style>

    </head>
    <body>

    <a href="#002_he">H</a>

        <div class="description g-nobre" id="002_he">
            <h2><a href="elemento/002_he">Hélio</a></h2>
            <p>queria que os comandos que ficassem nessa parte, fossem escritos em um arquivo diferente do arquivo que tem o botão.</p>
        </div>

    </body>
    </html>
  • You can create a include, if that’s exactly what I understand. Then Voce creates another html file, which can be at the same root as the main one. and call it a common html tag. Here is a link that can help:http://www.w3schools.com/howto/howto_html_include.asp

  • Split the html file? This sounds strange, but the "H" is a link, it can point to another html file (understand another page) and open the text field there, just change the link to another page. You can also pass a parameter to the page via querystring, to only display the field if you pass this parameter.

1 answer

-1

Example:
index.html

    <html>
    <head>

    <style type="text/css">
    .description{display:none;border-radius:10px;}
    .description:target{display:block;}
    .descriptions{margin:1.5em;}
    </style>

    <script src="https://www.w3schools.com/lib/w3.js"></script>
    </head>
    <body>

    <a href="#002_he">H</a>

    <div class="description g-nobre" id="002_he">
        <h2><a href="elemento/002_he">Hélio</a></h2>
            <div w3-include-html="content.html"></div>
    </div>
    <script>
       w3.includeHTML();
    </script>
    </body>
    </html>

html content.

 
<h1>Códigos restantes...</h1>
<p>Mussum Ipsum, cacilds vidis litro abertis. Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis. Detraxit consequat et quo num tendi nada. Quem manda na minha terra sou euzis! Mé faiz elementum girarzis, nisi eros vermeio. Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Manduma pindureta quium dia nois paga. Delegadis gente finis, bibendum egestas augue arcu ut est. Leite de capivaris, leite de mula manquis sem cabeça.</p>
<a href="https://wigny.github.io">Link</a>
 

Browser other questions tagged

You are not signed in. Login or sign up in order to post.