Javascript 同一页面上的导航栏_Javascript_Php_Html_Css_Ajax

Javascript 同一页面上的导航栏

javascript php html css ajax

Javascript 同一页面上的导航栏,javascript,php,html,css,ajax,Javascript,Php,Html,Css,Ajax,我确信我的问题很简单，但我在总体设计方面经验不足我正在做一个简单的PHP网站项目，我有一个导航栏，当点击其中一个导航栏时，不要转到另一个页面，而是根据点击的按钮更改指定的面板内容我认为这可以通过使用ajax和div来实现，但我认为也有一种方便而清晰的专业方法只需忽略不相关的行或代码，假设我希望在单击某个选项卡时不重新加载就可以编写该选项卡或按钮的消息我的html文件： <?php include('session.php'); ?> <html dir="rt

我确信我的问题很简单，但我在总体设计方面经验不足

我正在做一个简单的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>

我希望这有助于：

<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>


函数加载页（url，导入）
{
into=document.getElementById（into）；
into.innerHTML='正在加载…'；
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，url，true）；
xhr.onload=函数（）
{into.innerHTML=xhr.response；}
xhr.send（空）；
}
window.onload=函数（）
{
var menu=document.getElementById（'menu'）；
var list=[].slice.call（menu.getElementsByTagName（'a'）；
list.forEach（函数（链接）
{
link.onclick=函数（）
{
loadPage（this.href，“content”）；
返回false；
};
});
};
.调试
{边框：1px实心#BADA55；}

只需复制并粘贴到一个新文件.html。

根据需要编辑它；）

好的，你的代码在哪里？AJAX和div不方便、不清晰或不专业吗？我说我在设计前端方面没有很好的经验。一般来说，我在简单的示例中使用AJAX，但在div中不使用。你能给我们展示一下你正在使用的JavaScript吗？我们想帮忙，但如果我们不知道问题出在哪里，我们就无法做到。太棒了。谢谢@Charl，即使是一件简单的事情，前端问题也需要很多时间。

<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>