Div，顯示，隱藏切換。不斷變化的鏈接顏色

Question

嘿，我試圖爲我的網站做一個hide/show toogle。並更改鏈接顏色。

我知道prob是輸入。 鏈接的顏色在div上。不在鏈接上。

也許任何人都有一個好主意。 認爲我需要一個新的功能。 （jQuery的是）也許更短的方式是可能的。

在此先感謝！

// javascipt的

  function toggleMe(a){ 
     var e=document.getElementById(a); 
     var col=document.getElementById(a); 
     if(!e)return true; 
     if(e.style.display=="none"){ 
     e.style.display="block" 
     col.style.color="#000000"  
     } else { 
     e.style.display="none" 
    col.style.color="#000000" 
     } 
     return true; 
    } 

//input 

    <div id="topp"> 

     <div id="tops"> 

      <li> <a href="www.google" target="_self">Serien</a></li> 
       <li>Architektur</li> 
       <li >Portrait</li> 
       <li><a href=# onclick="return toggleMe('about')">About Me</a></li> 
       <li><a href=# onclick="return toggleMe('kont')">Kontakt</a></li> 
     <li><a href=# onclick="return toggleMe('imp')">Impressum</a></li> 
      <lie><span class="Stil1">Su</span>terrain.de</li></div> 

       </div>  
      </div> 
//divs 

     <div id="about" style="display:none" onclick="hideBox('about');"> 
    Lutz Bartelt<br /> 
    About 

     </div> 



     <div id="kont" style="display:none" onclick="hideBox('kont');"> 
    Lutz Bartelt<br /> 
<br /> 
    01522386174<br /> 
    WhiteWall<br /> 



    </div> 


     <div id="imp" style="display:none" onclick="hideBox('imp');"> 
    impress 
    </div> 

Answer 1

嗯，我已經適應你的HTML：

<div id="tops"> 
    <ul> 
     <li><a href="www.google" target="_self">Serien</a></li> 
     <li>Architektur</li> 
     <li>Portrait</li> 
     <li><a href="#" name="about">About Me</a></li> 
     <li><a href="#" name="kontakt">Kontakt</a></li> 
     <li><a href="#" name="impressum">Impressum</a></li> 
     <li><span class="Stil1">Su</span>terrain.de</li> 
    </ul> 
</div> 
<div id="panels"> 
    <div id="about"> 
     Lutz Bartelt<br /> 
     About 
    </div> 

    <div id="kontakt"> 
     Lutz Bartelt<br /> 
     <br /> 
     01522386174<br /> 
     WhiteWall<br /> 
    </div> 

    <div id="impressum"> 
     impress 
    </div> 
</div> 

而下面的jQuery似乎做什麼，我認爲你正在試圖做的：

$('#tops > ul > li > a').click(

function() { 
    var showThis = $(this).attr('name'); 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    $('#panels > div').hide(); 
    $('#' + showThis).show(); 
    return false; 
}); 

我對顏色變化使用了一個'active'類名，在演示中這個名字在CSS中定義爲：

.active { 
    color: #f00; 
    font-weight: bold; 
} 

JS Fiddle demo of the above。

Answer 2

你忘了通過鏈接對象，所以沒有辦法讓你真正改變它的顏色：

function toggleMe(div, link) 
{ 
    var e = document.getElementById(div); 
    if(!e) return(true); 
    if(e.style.display == "none") 
    { 
    e.style.display = "block"; 
    link.style.color = "red"; 
    } 
    else 
    { 
    e.style.display = "none"; 
    link.style.color = "blue"; 
    } 
    return(false); 
} 

<div id="topp"> 

      <div id="tops"> 

       <li> <a href="www.google" target="_self">Serien</a></li> 
        <li>Architektur</li> 
        <li >Portrait</li> 
        <li><a href=# onclick="return toggleMe('about', this)">About Me</a></li> 
        <li><a href=# onclick="return toggleMe('kont', this)">Kontakt</a></li> 
      <li><a href=# onclick="return toggleMe('imp', this)">Impressum</a></li> 
       <lie><span class="Stil1">Su</span>terrain.de</li></div> 

        </div>  
       </div> 
    //divs 

      <div id="about" style="display:none" onclick="hideBox('about');"> 
     Lutz Bartelt<br /> 
     About 

      </div> 



      <div id="kont" style="display:none" onclick="hideBox('kont');"> 
     Lutz Bartelt<br /> 
    <br /> 
     01522386174<br /> 
     WhiteWall<br /> 



     </div> 


      <div id="imp" style="display:none" onclick="hideBox('imp');"> 
     impress 
     </div> 

編輯：您可能還需要在該函數的底部，這樣就返回false實際上並未遵循網址。