开发者

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>

继续阅读：cssjavascriptjqueryxhtml

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9