javascriptなしで横向きのhtmlアンカー

http://www.indofolio.com/、これと同様の機能を持つウェブサイトを作成しようとしていますが、javascriptのないアンカータグで水平スクロールを行った方法がわかりません。 JavaScriptをオフにしてください。彼のウェブサイトはまだ正しく機能しています。彼がしたプログレッシブ・エンハンスメントが本当に大好きです。javascriptなしで横向きのhtmlアンカー

水平方向の固定のためのテストコードで、インラインブロックを取り出して左に浮かべて、完全に機能します。

<!DOCTYPE HTML> 
    <html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
.ab { 
    width: 20%; 
    height: 20%; 
    float: left; 
    display: inline-block; 
    border: 1px solid red; 

} 

</style> 
</head> 
<body> 
<a href="#box1">aaaaaaa</a> 
<a href="#box2">bbbbbbb</a> 
<div id="container" style="width:100%"> 
    <ul style="width:500%;height:2000px;background-color:red"> 
     <li class="ab"><a name="box1"></a> 
      <div>test</div> 
     </li> 
     <li class="ab"><a name="box2"></a> 
      <div>test2</div> 
     </li> 
     <li class="ab"> 
      <a name="box3"></a> 
      <div>test3</div> 
     </li> 
     <li class="ab"> 
      <div></div> 
     </li> 
     <li class="ab"> 
      <div></div> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

出典

2011-11-06 FireStream

Like Quentinは言ったが、彼の説明はあなたがウェブデザインを初めて使う人には少し欠けているかもしれない。 javascriptをオフにして、urlが変更されていることに注意してください。ホームページはで、次は#box2などです。これらはidのコンテンツボックスです。 aタグの通常の動作は、それらのポイントがページ上に存在し、アンカーがそのように設定されている場合、それらのポイントに「ジャンプ」することです。彼のホームページアンカーは<a class="link home selected" href="#box1">Home</a>で、hrefはその場所へのジャンプを引き起こします。

編集：あなたの例のためのいくつかの修正されたコードがあります。

HTML

<div id="nav"> 
<a href="#box1">B1</a> 
<a href="#box2">B2</a> 
<a href="#box3">B3</a> 
<a href="#box4">B4</a> 
<a href="#box5">B5</a> 
</div> 
<div id="container"> 
    <ul> 
     <li class="ab" id="box1"> 
      <div>test1</div> 
     </li> 
     <li class="ab" id="box2"> 
      <div>test2</div> 
     </li> 
     <li class="ab" id="box3"> 
      <div>test3</div> 
     </li> 
     <li class="ab" id="box4"> 
      <div>test4</div> 
     </li> 
     <li class="ab" id="box5"> 
      <div>test5</div> 
     </li> 
    </ul> 
</div>

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
.ab { 
    width: 20%; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

.ab div { 
    height: 500px; 
    border: 1px solid red; 
} 

#container { 
    width: 500%; /* five page widths for five horizontal pages */ 
    padding: 0; 
    margin: 1.5em 0 0; 
} 

#container ul { 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    position: fixed; 
    left: 0; 
    top: 0; 
} 

#nav a { 
    margin-right: 10px; 
    display: inline-block; 
}

出典

2011-11-06 20:39:55 ScottS

は、はい、私はそれがジャンプ方法を理解、それは私がちょうどそれをテストする上にコードを貼り付け、水平に動作しません。あなたがインラインブロックを取り除いて浮かせた時、それは完全には動作しますが、他の方法では動作しません。悲しいことに、それはindofolioで動作します....まだそれは謎です – FireStream

それはjavafriptをオフindofolioで水平に動いていません。それはちょうど "飛び乗る"場所にある。水平はjavascriptでのみ有効です。 – ScottS

javascriptをオフにし、div id = "wrapper"でオーバーフローを隠すようにすると、コンテンツを縮小するときにイメージが水平に整列され、メニューをクリックするとジャンプします。知っている。それは私の単純なテストでも正常に動作しません。それは水平にジャンプしません...私は正確にもう一度する必要があるときには、より正確なPLZ、私はダム、そして私はより愚かな気がします。 – FireStream

-1

JSが利用できない場合、通常のアンカーを使用して垂直方向にスクロールします。

JSでは水平方向の位置決めが適用されます。

出典

2011-11-06 20:21:43 Quentin

javascriptなしで横向きのhtmlアンカー

答えて

関連する問題