Coloring of tabs with Dynamics_问答_开发者_运维开发者技术经验分享

I have a question, (Below) I am trying to make the links to the two tabs that rollup accordion style to shade the one that isn't selected. I have accomplished this but now I need to darken to two links once they are both closed.

Could you point me in the right direction?

WDH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- <script type="text/javascript" src="../../../jQ_161/jquery-1.6.1.js"></script> -->

<script type="text/javascript">

$(document).ready(function(){
  $(".divOneDropdown").show();
  $(".clickOnePara").click(function() {
      $(".divOneDropdown").slideToggle(777);
      if ( $(".divTwoDropdown").css("display") != "none" ) {
          $(".divTwoDropdown").slideUp(777);
      }
  });
});

</script>

<script type="text/javascript">

$(document).ready(function(){
  $(".clickTwoPara").click(function() {
      $(".divTwoDropdown").slideToggle(777);
      if ( $(".divOneDropdown").css("display") != "none" ) {
          $(".divOneDropdown").slideUp(777);
      }
  });
});

</script>

<script type="text/javascript">

function flickColor1() {

  document.getElementById("dropButtonTxt1").style.color="white";
  document.getElementById("dropButtonTxt2").style.color="gray";

  }

  function flickColor2() {

  document.getElementById("dropButtonTxt2").style.color="white";
  document.getElementById("dropButtonTxt1").style.color="gray";

  }

</script>

<style type="text/css">

.divOneDropdown, .clickOnePara {
  background: none repeat scroll 0 0 transparent;
  cursor: pointer;
  margin: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 5px;
}

.clickOnePara{
  background-color: transparent;
  width: 200px;
  float: left;
}

.divTwoDropdown, .clickTwoPara {
  background: none repeat scroll 0 0 transparent;
  cursor: pointer;
  margin: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 5px;
}

.clickTwoPara{
  background-color: transparent;
  width: 200px;
  float: left;
  left: 4px;
}

.divOneDropdown {
  display: none;
  height: 260px;
  top: 28px;
  overflow: hidden;
}

.divTwoDropdown {
  display: none;
  height: 260px;
  top: 28px;
  overflow: hidden;
}

#contained{
  /*border: black solid 2px;*/
  width: 800px;
  height: 700px;
  position: relative;
  margin: auto;
}

#topNavs{
  position: relative;
  left: 0px;
  /*width: 100%;*/
  padding-bottom: 0px;
}

#contentDrops{
  padding-top: 20px;
}

/* Below is the Dropdown Nav Styles */

#dropButtons{

}

#dropNavButton1{
  height: 31px;
  left: 121px;
  padding-left: 37px;
  position: absolute;
  width: 504px;
  z-index: 5;
}

#dropNavButton1 a {
  display: block;
  height: 31px;
  width: 248px;
  background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
  text-decoration: none;
}

#dropNavButton1 a:hover {
  background-position: -252px 0;
  color: #FFFFFF;
}

#dropNavButton1 a:active {
  background-position: 0px 0;
  color: #DDDDDD;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

#dropNavButton2{
  height: 31px;
  left: 376px;
  padding-left: 37px;
  position: absolute;
  width: 503px;
  z-index: 5;
}

#dropNavButton2 a {
  display: block;
  height: 31px;
  width: 248px;
  background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
  text-decoration: none;
}

#dropNavButton2 a:hover {
  background-position: -252px 0;
}

#dropNavButton2 a:active {
  background-position: 0px 0;
  color: #DDDDDD;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

#dropButtonTxt1{
  font-size: 16px;
  font-family: 'LaneB';
  padding-left: 0px;
  padding-top: 6px;
}

#dropButtonTxt2{
  font-size: 16px;
  font-family: 'LaneB';
  padding-left: 0px;
  padding-top: 6px;
}

/* Photo Gallery - Text not associated with above sprite */

#dropNavButton1 a:link{
  color: #FFFFFF;
}

#dropNavButton1 a:visited{
  color: #FFFFFF;
}

/* Contact - Text not associated with above sprite */

#dropNavButton2 a:link{
  color: #FFFFFF;
}

#dropNavButton2 a:visited{
  color: #FFFFFF;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

/* Dropdown Nav Styles END */


/* Complimentary Consultation Button - START */

.compConsult{
  background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;      
  background-color: #000000;
  height: 38px;
  left: 33%;
  padding-left: 0;
  position: relative;
  width: 262px;
  z-index: 5;
}

.compConsult a {
  display: block;
  height: 31px;
  width: 248px;
  text-decoration: none;
}

.compConsult a:hover {
  background-position: -252px 0;
  color: #FFFFFF;
}

.compConsult a:active {
  background-position: -504px 0;
  color: #DDDDDD;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

.compConsult a:link{
  color: #FFFFFF;
}

.compConsult a:visited{
  color: #FFFFFF;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

.compConsultTxt{
  font-family: 'LaneB';
  font-size: 18px;
  padding-top: 6px;
  position: absolute;
  right: 16px;
  width: 230px;
}


/* Complimentary Consultation Button - END */

</style>
</head>

<body>
<div id="contained">

<div id="topNavs">

<div id="dropNavButton1">
  <p class="clickOnePara"><a href="#" onClick="flickColor1()"><span id="dropButtonTxt1">PROCEDURE AND RECOVERY</span></a></p>
</div>

<div id="dropNavButton2">
  <p class="clickTwoPara"><a href="#" onClick="flickColor2()"><span id="dropButtonTxt2">SAFETY AND SIDE EFFECTS</span></a></p>
</div>

</div>

<div id开发者_JAVA百科="contentDrops">
<div class="divOneDropdown">

  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est, 
  consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc, 
  et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui 
  vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce 
  ullamcorper sapien ut tellus dictum id sollicitudin nunc congue. 
  Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus 
  et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui. 
  Curabitur tincidunt pretium quam, a iaculis velit porta nec. 
  </p>

  <div class="compConsult">
    <a href="#"><span class="compConsultTxt">Complimentary Consultation</span></a>
  </div>

  <p>
  Curabitur dignissim leo sed dolor dapibus quis auctor dui 
  vestibulum.
  <br /><br />
  Sed ac laoreet odio. Mauris nec cursus dui.
  </p>
</div>

<div class="divTwoDropdown">
  <p>
  Phasellus dignissim leo sed dolor dapibus quis auctor dui 
  vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce 
  ullamcorper sapien ut tellus dictum id sollicitudin nunc congue. 
  Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas.
  </p>

  <div class="compConsult">
    <a href="#"><span class="compConsultTxt">Complimentary Consultation</span></a>
  </div>

  <p>
  Sed elit enim, congue et laoreet a, molestie in neque.
  <br /><br />
  In placerat tellus nunc, et placerat arcu.
  </p>
</div>

</div>
</div>
</body>
</html>

I believe I understand what you are asking for. Give this a shot:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".divOneDropdown").show();
        $(".divTwoDropdown").hide();
        ChangeColor()

        $(".clickOnePara").click(function () {
            $(".divOneDropdown").slideToggle(777,
                function () {
                    ChangeColor();
                }
            );
            $(".divTwoDropdown").hide();
        });

        $(".clickTwoPara").click(function () {
            $(".divTwoDropdown").slideToggle(777,
                function () {
                    ChangeColor();
                }
            );
            $(".divOneDropdown").hide();
        });
    });

    function ChangeColor() {
        if ($('.divOneDropdown').is(':visible')) {
            document.getElementById("dropButtonTxt1").style.color = "white";
            document.getElementById("dropButtonTxt2").style.color = "gray";
        }
        else if ($('.divTwoDropdown').is(':visible')) {
            document.getElementById("dropButtonTxt1").style.color = "gray";
            document.getElementById("dropButtonTxt2").style.color = "white";
        }
        else {
            document.getElementById("dropButtonTxt1").style.color = "gray";
            document.getElementById("dropButtonTxt2").style.color = "gray";
        }
    }
</script>

<style type="text/css">

.divOneDropdown, .clickOnePara {
  background: none repeat scroll 0 0 transparent;
  cursor: pointer;
  margin: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 5px;
}

#contained { background-color: lightgray; } 

.clickOnePara{
  background-color: transparent;
  width: 200px;
  float: left;
}

.divTwoDropdown, .clickTwoPara {
  background: none repeat scroll 0 0 transparent;
  cursor: pointer;
  margin: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 5px;
}

.clickTwoPara{
  background-color: transparent;
  width: 200px;
  float: left;
  left: 4px;
}

.divOneDropdown {
  display: none;
  height: 260px;
  top: 28px;
  overflow: hidden;
}

.divTwoDropdown {
  display: none;
  height: 260px;
  top: 28px;
  overflow: hidden;
}

#contained{
  /*border: black solid 2px;*/
  width: 800px;
  height: 700px;
  position: relative;
  margin: auto;
}

#topNavs{
  position: relative;
  left: 0px;
  /*width: 100%;*/
  padding-bottom: 0px;
}

#contentDrops{
  padding-top: 20px;
}

/* Below is the Dropdown Nav Styles */

#dropButtons{

}

#dropNavButton1{
  height: 31px;
  left: 121px;
  padding-left: 37px;
  position: absolute;
  width: 504px;
  z-index: 5;
}

#dropNavButton1 a {
  display: block;
  height: 31px;
  width: 248px;
  background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
  text-decoration: none;
}

#dropNavButton1 a:hover {
  background-position: -252px 0;
  color: #FFFFFF;
}

#dropNavButton1 a:active {
  background-position: 0px 0;
  color: #DDDDDD;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

#dropNavButton2{
  height: 31px;
  left: 376px;
  padding-left: 37px;
  position: absolute;
  width: 503px;
  z-index: 5;
}

#dropNavButton2 a {
  display: block;
  height: 31px;
  width: 248px;
  background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
  text-decoration: none;
}

#dropNavButton2 a:hover {
  background-position: -252px 0;
}

#dropNavButton2 a:active {
  background-position: 0px 0;
  color: #DDDDDD;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

#dropButtonTxt1{
  font-size: 16px;
  font-family: 'LaneB';
  padding-left: 0px;
  padding-top: 6px;
}

#dropButtonTxt2{
  font-size: 16px;
  font-family: 'LaneB';
  padding-left: 0px;
  padding-top: 6px;
}

/* Photo Gallery - Text not associated with above sprite */

#dropNavButton1 a:link{
  color: #FFFFFF;
}

#dropNavButton1 a:visited{
  color: #FFFFFF;
}

/* Contact - Text not associated with above sprite */

#dropNavButton2 a:link{
  color: #FFFFFF;
}

#dropNavButton2 a:visited{
  color: #FFFFFF;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

/* Dropdown Nav Styles END */


/* Complimentary Consultation Button - START */

.compConsult{
  background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;      
  background-color: #000000;
  height: 38px;
  left: 33%;
  padding-left: 0;
  position: relative;
  width: 262px;
  z-index: 5;
}

.compConsult a {
  display: block;
  height: 31px;
  width: 248px;
  text-decoration: none;
}

.compConsult a:hover {
  background-position: -252px 0;
  color: #FFFFFF;
}

.compConsult a:active {
  background-position: -504px 0;
  color: #DDDDDD;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

.compConsult a:link{
  color: #FFFFFF;
}

.compConsult a:visited{
  color: #FFFFFF;
}

/* a:link -  - unvisited link */
/* a:visited -  - visited link */
/* a:hover -  - mouse over link */
/* a:active -  - selected link */

.compConsultTxt{
  font-family: 'LaneB';
  font-size: 18px;
  padding-top: 6px;
  position: absolute;
  right: 16px;
  width: 230px;
}


/* Complimentary Consultation Button - END */

</style>
</head>

<body>
<div id="contained">

<div id="topNavs">

<div id="dropNavButton1">
  <p class="clickOnePara"><a href="#" ><span id="dropButtonTxt1">PROCEDURE AND RECOVERY</span></a></p>
</div>

<div id="dropNavButton2">
  <p class="clickTwoPara"><a href="#" ><span id="dropButtonTxt2">SAFETY AND SIDE EFFECTS</span></a></p>
</div>

</div>

<div id="contentDrops">
<div class="divOneDropdown">

  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est, 
  consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc, 
  et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui 
  vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce 
  ullamcorper sapien ut tellus dictum id sollicitudin nunc congue. 
  Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus 
  et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui. 
  Curabitur tincidunt pretium quam, a iaculis velit porta nec. 
  </p>

  <div class="compConsult">
    <a href="#"><span class="compConsultTxt">Complimentary Consultation</span></a>
  </div>

  <p>
  Curabitur dignissim leo sed dolor dapibus quis auctor dui 
  vestibulum.
  <br /><br />
  Sed ac laoreet odio. Mauris nec cursus dui.
  </p>
</div>

<div class="divTwoDropdown">
  <p>
  Phasellus dignissim leo sed dolor dapibus quis auctor dui 
  vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce 
  ullamcorper sapien ut tellus dictum id sollicitudin nunc congue. 
  Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas.
  </p>

  <div class="compConsult">
    <a href="#"><span class="compConsultTxt">Complimentary Consultation</span></a>
  </div>

  <p>
  Sed elit enim, congue et laoreet a, molestie in neque.
  <br /><br />
  In placerat tellus nunc, et placerat arcu.
  </p>
</div>

</div>
</div>
</body>
</html>