[英]css menu code content inside a div
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 你好,所以我试图用css制作菜单,但是当我尝试单击菜单中的元素时,它将在新标签页中打开它,而我希望它在同一页面的div内,这是css中的新功能我的作业可以帮我吗,谢谢,这是代码
<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>
<a href="#">Catalogue</a>
<ul>
<li><a href="#">Produits</a></li>
<li><a href="#">Catégories</a></li>
<li><a href="#">Marque</a></li>
<li><a href="#">Fournisseur</a></li>
</ul>
</li>
<li>
<a href="#">Commandes</a>
<ul>
<li><a href="#">Commandes</a></li>
<li><a href="#">Messages prédifinis</a></li>
</ul>
</li>
<li>
<a href="#">Clients</a>
<ul>
<li><a href="#">Clients</a> <li>
<li><a href="#">Pays</a></li>
<li><a href="#">Groupes</a> <li>
<li><a href="#">Titre de civilité</a></li>
</ul>
</li>
<li>
<a href="#">Paramètres avancés</a>
<ul>
<li><a href="#">Emails</a></li>
<li><a href="#">Images</a></li>
</ul>
</li>
<li>
<a href="#">Administration</a>
<ul>
<li><a href="#">Employés</a></li>
<li><a href="#">Profils</a></li>
<li><a href="#">Permission</a></li>
</ul>
</li>
<li>
<a href="#">Stats</a>
<ul>
<li><a href="#">Stats</a></li>
</ul>
</li>
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: 这是使用css可获得的最接近的结果,但是使用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. 无论您做什么,都必须确保自己开始使用id标记,否则它只是充当链接,您可以轻松地将href ='#'替换为id ='something',然后编写一些打开的CSS或javascript您想要的div中的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.