Question

我对前端开发并不陌生，但我遇到过客户的要求，我以前从未做过，如果有人能指出我正确的方向，我将不胜感激。

我的index.html中有7个<section>个标签。每个部分代表一个站点导航链接。所以“Home”链接会显示“home section”等等。并且所请求的部分将填充在主内容视图/包装器中。

通常，我将使用MVC框架来实现此功能。但是，我被要求不实施MVC。我的想法是找出点击了哪个导航链接，然后将特定部分加载到main-content-wrapper中。

我怎样才能实现这一点，以便相应地调整main-content-wrapper的高度，如果需要，还有一个浏览器滚动条？因为某些部分具有长度内容。

顺便说一句，main-content-wrapper'溢出已设置为'auto'。

Answer 1

如果您正在填充页面上的所有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();
    });
});

Answer 2

我不清楚你遇到什么问题。您是否可以使用ajax动态加载内容？这样的事情（http://api.jquery.com/jQuery.ajax/）：

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

如果您不允许使用ajax，iframe如何以及在yoru链接上使用target属性？

或者您是否只是在使用CSS时遇到问题并使动态内容正确溢出？

Answer 3

这是另一个建议，使用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();
}

HTML5将<section>内容加载到主视图包装器？</section>

3 个答案: