HTML + jquery-用于更改内容DIV中内容的菜单 [英] HTML + jquery - menu to change contents in the content DIV

问题描述

我一直在研究如何做，但是没有找到满足我需求的解决方案.

得到了我的网页的基本布局与左边的，独立的div的标头和在当选择了菜单按钮中的一个的所有应显示的内容的中间一个div菜单.

我想仅在不按菜单按钮之一的情况下重新加载页面的情况下，仅动态更改"content" div的内容.

我已经设法通过jquery按照以下方式进行操作:

        <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){

            $('#nav ul li a').click(function(){
                $('#main').load('contents.html #' + $(this).attr('href'));
                return false;
            });

        });

菜单:

        <nav id="nav">
            <ul class="menu">
                <li class="menu1"><a href="menu1"></a></li>
                <li class="menu2"><a href="menu2"></a></li>
                <li class="menu3"><a href="menu3"></a></li>
                <li class="menu4"><a href="menu4"></a></li>
                <li class="menu5"><a href="menu5"></a></li>
            </ul>
        </div>
    </nav>  

contents.html文件示例:

<div id="menu1">
    <h2>Menu1</h2>
    <p>Menu1 page contents</p>
</div>

因此，当按下menu1按钮时，我可以更改main div的内容以反映相关数据-可以.

我的问题是:

1)这是正确的操作方法吗?如果没有，您会推荐什么?

2)我不仅要显示文本，还要显示更多高级的内容(例如，如果我想在div-id ="menu1"中添加另一个jquery呢?我已经尝试过了，但是没有用.)

P.S-我只是一个初学者，所以也许我错过了一些基本知识-但我自己无法解决.

提前谢谢！

彼得

解决方案

我认为有很多方法可以实现您想要的.这取决于您要加载的内容的性质.

如果没有大量内容，则可以将其全部加载到不同div上页面加载的页面上，然后在单击菜单项时仅显示和隐藏相关的div. (有关某些实现，请参见 twitter bootstrap ，例如选项卡式浏览).

如果您只有文字，则可以使用ajax从外部文件中加载数据 w3schools.com .

或者，如上所述，您可以使用 angular.js ， knockout.js 等.

希望有帮助.

I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.

Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.

I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.

I've managed to do it as per below with jquery:

        <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){

            $('#nav ul li a').click(function(){
                $('#main').load('contents.html #' + $(this).attr('href'));
                return false;
            });

        });

The menu :

        <nav id="nav">
            <ul class="menu">
                <li class="menu1"><a href="menu1"></a></li>
                <li class="menu2"><a href="menu2"></a></li>
                <li class="menu3"><a href="menu3"></a></li>
                <li class="menu4"><a href="menu4"></a></li>
                <li class="menu5"><a href="menu5"></a></li>
            </ul>
        </div>
    </nav>  

contents.html file sample:

<div id="menu1">
    <h2>Menu1</h2>
    <p>Menu1 page contents</p>
</div>

So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.

My questions are:

1) is this the correct way on how to do it ? If not what would you recommend ?

2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)

P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.

Thanks in advance!

Peter

解决方案

I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.

If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).

If you do just have text, you could use ajax to load in the data from an external file w3schools.com.

Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.

Hope that helps.

这篇关于HTML + jquery-用于更改内容DIV中内容的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！