同一页面上的导航栏[关闭]答案

【问题标题】：Navigation Bar On The Same Page [closed]同一页面上的导航栏[关闭]
【发布时间】：2015-03-05 22:18:06
【问题描述】：

我确信我的问题很简单，但我在总体上的设计经验很差。

我正在开发一个简单的 PHP 网站项目，并且我有一个导航栏，并且希望在单击其中一个栏时不要转到另一个页面，而只是根据单击的按钮更改指定的面板内容。

我认为这可以通过使用 ajax 和 div 来完成，但我认为也有一种方便而清晰的专业方法。

只需忽略不相关的行或代码，假设我想在单击其中一个选项卡时写入该选项卡或按钮的消息而不重新加载。

我的html文件：

<?php
include('session.php');
?>

    <html dir="rtl" lang="ar">
        <head>
            <title>Main view</title>
            <link href="MainAdminStyle.css" rel="stylesheet" type="text/css">
            <script src="myjavascript.js"></script>
        </head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <body>
            <img src="image/RightImage.jpg" style="width:100%; height: 200"/>
            <div id="menu">
                <ul>
                    <li><a href="index.html">bla</a></li>
                    <li><a href="aboutus.html">bla1</a></li>
                    <li><a href="services.html">bla2</a></li>
                    <li><a href="contactus.html">bla3</a></li>
                </ul>
            </div>
        </body>
    </html>

MainAdminStyle.css

#menu {
    width: 800px;
    height: 35px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}
#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}
#menu li { 
    display: inline; 
    padding: 20px; 
}
#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}
#menu a:hover {
    color: #F90;
    background-color: #FFF;
}

【问题讨论】：

好的，你的代码在哪里？
AJAX 和 div 是不是不方便清晰不专业？
我说我没有很好的前端设计经验，我在简单的例子中使用 ajax 而不是 div。
您能否向我们展示您正在使用的 JavaScript？我们想提供帮助，但除非我们知道问题所在，否则我们将无法提供帮助。

标签： javascript php html css ajax

【解决方案1】：

我希望这会有所帮助：

<html>
    <head>
        <script>
            function loadPage(url, into)
            {
                into = document.getElementById(into);
                into.innerHTML = 'Loading...';

                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);

                xhr.onload = function()
                { into.innerHTML = xhr.response; }

                xhr.send(null);
            }

            window.onload = function()
            {
                var menu = document.getElementById('menu');
                var list = [].slice.call(menu.getElementsByTagName('a'));

                list.forEach(function(link)
                {
                    link.onclick = function()
                    {
                        loadPage(this.href, 'content');
                        return false;
                    };
                });
            };
        </script>
        <style>
            .debug
            { border:1px solid #BADA55; }
        </style>
    </head>
    <body>
        <div id="menu" class="debug">
            <ul>
                <li><a href="index.html">bla</a></li>
                <li><a href="aboutus.html">bla1</a></li>
                <li><a href="services.html">bla2</a></li>
                <li><a href="contactus.html">bla3</a></li>
            </ul>
        </div>
        <div id="content" class="debug">
        </div>
    </body>
</html>

只需复制并粘贴到一个新的 file.html 中。根据需要编辑它;)

【讨论】：

太棒了。谢谢@Charl，前端问题即使是简单的事情也需要很多时间来实现。