div中的CSS菜單代碼內容

Question

你好，所以我試圖用css制作菜單，但是當我嘗試單擊菜單中的元素時，它將在新標簽頁中打開它，而我希望它在同一頁面的div內，這是css中的新功能我的作業可以幫我嗎，謝謝，這是代碼

<div id="menu"><?php include('admin/Menu/menu.php');?></div>

<div id="main">
  i want the content here
</div>

這是菜單代碼

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

Answer 1

您可以執行以下操作：

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

這是使用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>

無論您做什么，都必須確保自己開始使用id標記，否則它只是充當鏈接，您可以輕松地將href ='＃'替換為id ='something'，然后編寫一些打開的CSS或javascript您想要的div中的內容。