1

私はフロントエンド開発に不慣れではありませんが、これまでに行ったことのないクライアントからの要件に遭遇しました。誰かが私を正しい方向に向けてくれれば幸いです。

<section>index.html内に7つのタグがあります。各セクションは、サイトナビゲーションリンクの1つを表します。したがって、「ホーム」リンクには「ホームセクション」などが表示されます。そして、要求されたセクションがメインコンテンツビュー/ラッパーに入力されます。

通常、私はこの機能を実行するためにMVCフレームワークを採用します。ただし、MVCを実装しないように求められます。私の考えは、クリックされたナビゲーションリンクを見つけて、特定のセクションをmain-content-wrapperにロードすることでした。

main-content-wrapperの高さがそれに応じて調整され、必要に応じてブラウザーのスクロールバーが表示されるようにするには、どうすればよいですか？一部のセクションには長い内容が含まれているためです。

ちなみに、main-content-wrapperのオーバーフローは「auto」に設定されています。

4

3 に答える 3

2

ページにすべてのsection-sを入力している場合は、これを試すことができます-http://jsfiddle.net/Fyhm7/

HTML

<a href="#" data-section="#home">Home</a>
<a href="#" data-section="#products">Products</a>
<a href="#" data-section="#contact">Contact</a>

<section id="home">Home</section>
<section id="products">Products</section>
<section id="contact">Contact</section>

JS

$("a").on("click", function() {
    var id = $(this).data("section");

    $("section:visible").fadeOut(function() {
        $(id).fadeIn();
    });
});
于 2012-07-27T15:59:52.850 に答える
0

どこで問題が発生しているのかわかりません。ajaxを使用してコンテンツを動的にロードできますか？このようなもの（http://api.jquery.com/jQuery.ajax/）：

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('#mycontent').html(data);
  }
});

ajaxの使用が許可されていない場合は、iframeを使用して、yoruリンクでtarget属性を使用するのはどうでしょうか。

または、CSSに問題があり、動的コンテンツが正しくオーバーフローするだけですか？

于 2012-07-27T15:52:33.087 に答える
0

CSS3を使用した別の提案があります（これは改善できることはわかっていますが、アイデアを提供するためにこれをすばやく実行しています）。

これは、コンテンツがすでにロードされていることを前提としています。AJAXを介してロードしている場合は、別の方法でロードします。

HTML

<nav>
  <a href='#content1'>Content 1</a>
  ...
  <a href='#content7'>Content 7</a>
</nav>
<article id='main-content-wrapper'>
  <section id='content1'>content 1</section>
  ...
  <section id='content7'>content 7</section>
</article>

CSS

#main-content-wrapper{ 
  max-height: 30em; /* arbitrary for example only */ 
  overflow:auto; /* scroll if over max-height */
}
#main-content-wrapper section:not(:first-child){ display:none; }
#main-content-wrapper section:target{ display:block; }

JavaScript（CSS3が必要ない場合：target-私はこれをテストしていません）

var id = location.hash.replace('#','');
if( id.length > 0 ){
  var sections = document.getElementById('main-content-wrapper').getElementsByTagName('section');
  for( var i = sections.length-1; i >= 0; i-- ){
    sections[i].style.display = 'none';
  }
  document.getElementById(id).style.display = 'block';
}

JQueryバージョン

if( location.hash.length > 0 ){
  $('#main-content-wrapper content').hide();
  $(location.hash).show();
}
于 2012-07-27T16:14:02.383 に答える