css menu code content inside a div - php

Question

hello so i'm trying to make a menu with css but when i try to click on an element from the menu it opens it in a new tab while i want it inside a div in the same page i'm new in css and thats my homework can you help me please and thanks
this is the code
<div id="menu"><?php include('admin/Menu/menu.php');?></div>
<div id="main">
i want the content here
</div>
this is the menu code
<ul id="menu">
<li>
Catalogue
<ul>
<li>Produits</li>
<li>Catégories</li>
<li>Marque</li>
<li>Fournisseur</li>
</ul>
</li>
<li>
Commandes
<ul>
<li>Commandes</li>
<li>Messages prédifinis</li>
</ul>
</li>
<li>
Clients
<ul>
<li>Clients <li>
<li>Pays</li>
<li>Groupes <li>
<li>Titre de civilité</li>
</ul>
</li>
<li>
Paramètres avancés
<ul>
<li>Emails</li>
<li>Images</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Employés</li>
<li>Profils</li>
<li>Permission</li>
</ul>
</li>
<li>
Stats
<ul>
<li>Stats</li>
</ul>
</li>

Answer 1

What you could do is either something like this:
<a id='showMeButton'>button</a>
<a id='showThisButton'>button2</a>
<div id='main'>
<div id='showMeContent' class='content'>
<p>This is just some basic content</p>
</div>
<div id='showThisContent' class='content'>
<p>This is also just some basic content</p>
</div>
</div>
<style>
.content { display: none; }
#showMeButton:active #showMeContent { display: block; }
#showThisButton:active #showThisContent { display: block; }
</style>
This is the closest you can get using css, but you might be able to do this a little better by using jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id='showMeButton'>button</a>
<a id='showThisButton'>button2</a>
<div id='main'></div>
<script>
$('#showMeButton').click(function() {
$("#main").empty();
$("#main").append("<p>This is some content</p>");
});
$('#showThisButton').click(function() {
$("#main").empty();
$("#main").append("<p>This is also some content</p>");
});
</script>
Whatever you do, you dó have to make sure you start using id tags, otherwise it just acts as a link, you can easily replace the href='#' with id='something', and then write some css or javascript which opens your content inside the div you'd like it in.