使用Dynamics对选项卡着色

时间：2011-07-04 17:43:31

标签： javascript jquery css xhtml

我有一个问题，（下面）我正在尝试将指向汇总手风琴风格的两个标签链接到一个未选中的标签。我已经完成了这个，但是现在我需要在两个链接都关闭后变暗。

你能指出我正确的方向吗？

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="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>

1 个答案:

答案 0 :(得分：0)

我相信我理解你的要求。试一试：

<!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>
相关问题
最新问题