Html編集ページの内容

私はhtmlとcssが初めてで、このサイドバーの例を使用したいと考えています。問題は、コンテンツがすべてのサイドバーページに表示されることです。Html編集ページの内容

他のページへのコンテンツの取得方法を教えてください。

クリックすると、Webページが別のページに変わるのがわかります。しかし、内容はまだ同じです。何とか間違っているとか、ページごとにクラスを作成しなければならないと思いますが、構文はわかりません。

<head> 
 
    <title>OpereX Project</title> 
 
    <style> 
 
    body 
 
    { 
 
     font-family: "Lato", sans-serif; 
 
    } 
 
    
 
    .sidenav 
 
    { 
 
     height: 100%; 
 
     width: 160px; 
 
     position: fixed; 
 
     z-index: 1; 
 
     top: 0; 
 
     left: 0; 
 
     background-color: #99ccff; 
 
     overflow-x: hidden; 
 
     padding-top: 20px; 
 
    } 
 
    
 
    .sidenav a 
 
    { 
 
     padding: 6px 8px 6px 16px; 
 
     text-decoration: none; 
 
     font-size: 25px; 
 
     color: black; 
 
     display: block; 
 
    } 
 
    
 
    .sidenav a:hover 
 
    { 
 
     color: #f1f1f1; 
 
    } 
 
    
 
    .main 
 
    { 
 
     margin-left: 160px; /* Same as the width of the sidenav */ 
 
     font-size: 28px; /* Increased text to enable scrolling */ 
 
     padding: 0px 10px; 
 
    } 
 
    
 
    @media screen and (max-height: 450px) 
 
    { 
 
     .sidenav {padding-top: 15px;} 
 
     .sidenav a {font-size: 18px;} 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    
 
    <div class="sidenav"> 
 
     <a href="#about">About</a> 
 
     <a href="#services">Services</a> 
 
     <a href="#clients">Clients</a> 
 
     <a href="#contact">Contact</a> 
 
    </div> 
 
    
 
    <div class=main> 
 
     <h2>Project</h2> 
 
    </div> 
 
      
 
    </body> 
 
    </html>

出典

2017-12-19 cephlot

それはちょうどHTMLでそのように動作しません。実際に 'メイン'セクションの内容を置き換えるには、javascriptを使用する必要があります。プレーンなjavascriptや、Angularやその他の一般的なフレームワークのいずれかを使ってこれを行うことができます。簡潔にするためにhtmlとcssに固執する場合は、次の2つのオプションがあります。

1 - あなたは自分が持っているすべてのコンテンツに別々のHTMLページを作成し、一般的なレイアウトとsidenavが、別のコンテンツを置く。次に、あなたは、しかし、あなたが知っているもので働くことになります、ページが増大した場合、管理するために、他のhtmlページ

<a href="services.html">Services</a>

これは非常に単純ですが、悪夢を指すようにナビゲーションバーのリンクを変更し、多分これは良いです基礎を学ぶために行く方法。

2 - 1ページにすべてのコンテンツを配置し、さまざまな部分の名前付きセクションを作成できます。現在、リンクは現在のページのID（ '＃idname'構文）を指しているので、そのままリンクを維持します。次に、リンクに一致する各セクションにIDを追加するだけです。

<div id="clients"> 
    clients content 
</div>

リンクは、ページを選択したセクションにスクロールします。これはあなたが望むものではありませんが、これはhtmlやcssだけで動作するものです。 2番目のアプローチの例については、https://jsfiddle.net/gouk0b8t/

出典

2017-12-19 07:43:44

ありがとうございます。私はいくつかの異なる解決策を見て、最もよく合うものを見てみましょう！ – cephlot

のようになります。他のページ（about.html）を作成してそこにコンテンツを追加し、アンカータグのhrefに下のように追加する必要があります。

<head> 
 
    <title>OpereX Project</title> 
 
    <style> 
 
    body 
 
    { 
 
     font-family: "Lato", sans-serif; 
 
    } 
 
    
 
    .sidenav 
 
    { 
 
     height: 100%; 
 
     width: 160px; 
 
     position: fixed; 
 
     z-index: 1; 
 
     top: 0; 
 
     left: 0; 
 
     background-color: #99ccff; 
 
     overflow-x: hidden; 
 
     padding-top: 20px; 
 
    } 
 
    
 
    .sidenav a 
 
    { 
 
     padding: 6px 8px 6px 16px; 
 
     text-decoration: none; 
 
     font-size: 25px; 
 
     color: black; 
 
     display: block; 
 
    } 
 
    
 
    .sidenav a:hover 
 
    { 
 
     color: #f1f1f1; 
 
    } 
 
    
 
    .main 
 
    { 
 
     margin-left: 160px; /* Same as the width of the sidenav */ 
 
     font-size: 28px; /* Increased text to enable scrolling */ 
 
     padding: 0px 10px; 
 
    } 
 
    
 
    @media screen and (max-height: 450px) 
 
    { 
 
     .sidenav {padding-top: 15px;} 
 
     .sidenav a {font-size: 18px;} 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    
 
    <div class="sidenav"> 
 
     <a href="about.html">About</a> 
 
     <a href="services.html">Services</a> 
 
     <a href="clients.html">Clients</a> 
 
     <a href="contact.html">Contact</a> 
 
    </div> 
 
    
 
    <div class=main> 
 
     <h2>Project</h2> 
 
    </div> 
 
      
 
    </body> 
 
    </html>

出典

2017-12-19 07:50:36

答えて

関連する問題