javascript - Div、显示、隐藏切换。改变链接颜色

Question

嘿，我试着为我的网站制作一个隐藏/显示工具。并更改链接颜色。

我知道概率是输入。链接颜色继续 div。不在链接上。

也许任何人都有一个好主意。认为我需要一个新功能。 (jquery 已打开)也许可以使用更短的方法。

提前致谢!

//javascript

          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 .