Question

嘿，我试图为我的网站隐藏/显示toogle。并更改链接颜色。

我知道概率是输入。 linkcolor在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，这样就不会实际跟踪URL。

Div，show，hide toggle。改变链接颜色

2 个答案: