dongrong9053 2015-03-05 22:18
浏览 69
已采纳

导航栏在同一页面[关闭]

I'm sure that my problem is simple, but I have poor experience on designing in general.

I'm working on a simple PHP website project, and I have a navigation bar and want when click on one of the bars don't go to another page, rather just change a specified panel content according what the clicked button.

I think this could be done by using ajax and div but I think also there is a convenient and clear way to do that professionally.

Just ignore the unrelated lines or code, assuming that I want when click on one of the tab write a message of that tab or button without reloading.

My html file:

<?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;
}
  • 写回答

1条回答 默认 最新

  • duandai7601 2015-03-06 00:17
    关注

    I hope this helps:

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

    just copy & paste into a new file.html. edit it as you want ;)

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 fesafe材料库问题
  • ¥35 beats蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统