1

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

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

通常，我会使用 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 回答