HTML5正在加载< section>内容成主视图包装？ [英] HTML5 loading a <section> content into a main view wrapper?

问题描述

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

I am no stranger to front-end development, but I have come across a requirement by a client which I have never done before, and I would appreciate it if someone can point me into the right direction.

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

I have 7 <section> tags within my index.html. Each section represents one of the site navigation link. so "Home" link will show "home section" and so on. And the requested section gets populated in the main-content view/wrapper.

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

Usually, I will employ a MVC framework to get this functionality going. However, I am asked not to implement MVC. My thoughts were to find out which navigation link was clicked and then load the particular section into the main-content-wrapper.

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

How can I make this happened so that main-content-wrapper's height is adjusted accordingly, and there is a browser scroll bar if needed? Because some sections have a lenghty content.

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

By the way, main-content-wrapper' overflow has been set to 'auto'.

推荐答案

如果你在你的页面上填充所有部分 -s，你可以尝试这个 - http://jsfiddle.net/Fyhm7/

If you're populating all the section-s on your page you can try this - 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();
    });
});

这篇关于HTML5正在加载< section>内容成主视图包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！