Question

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

我正在开发一个简单的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;
}

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

只是复制＆amp;粘贴到新的file.html。根据需要编辑它;）

导航栏在同一页面上

1 个答案: