css中的菜單代碼內容

你好所以我想用css製作菜單，但是當我嘗試點擊菜單中的一個元素時，它會在新選項卡中打開它，而我想要它在div中同一頁我在新的CSS和多數民衆贊成我的功課，你可以幫我請，並感謝這是代碼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>

來源

2014-03-26 user3465881

這可能是也可能不是相關的，但你的'div'和'ul'兩者都有相同的'id'。您不應該在同一頁面上爲多個元素使用相同的「id」。如果您需要引用多個元素，請使用'class'。 –

菜單將消失，如果我更改ul的ID必須是相同的我認爲 – user3465881

ID在頁面中是唯一的，根據該頁面在新選項卡中打開，這是因爲瀏覽器是您配置瀏覽器總是打開一個新標籤，嘗試使用其他瀏覽器或重置當前瀏覽器的設置 – Moussawi7

你可以做的要麼是這樣的：

<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標籤，否則它只是作爲一個鏈接，你可以很容易地用id ='something'替換href ='＃'，然後編寫一些css或者javascript來打開它你的內容在你想要的div裏面。

來源

2014-03-26 20:34:28

感謝您的幫助 – user3465881

css中的菜單代碼內容

回答

相關問題