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实际上并未遵循网址。