title: Navigation Bar On The Same Page
body: <p>I'm sure that my problem is simple, but I have poor experience on designing in general.</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>My html file:</p>
  
  <pre><code>&lt;?php
  include('session.php');
  ?&gt;
  
      &lt;html dir="rtl" lang="ar"&gt;
          &lt;head&gt;
              &lt;title&gt;Main view&lt;/title&gt;
              &lt;link href="MainAdminStyle.css" rel="stylesheet" type="text/css"&gt;
              &lt;script src="myjavascript.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
          &lt;body&gt;
              &lt;img src="image/RightImage.jpg" style="width:100%; height: 200"/&gt;
              &lt;div id="menu"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;bla&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="aboutus.html"&gt;bla1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="services.html"&gt;bla2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contactus.html"&gt;bla3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>MainAdminStyle.css</p>
  
  <pre><code>#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;
  }
  </code></pre>