動態標籤的着色

我有一個問題，（下面）我試圖使兩個選項卡的鏈接彙總手風琴風格陰影未選中。我已經完成了這個，但是現在我需要在兩個關閉時都變暗。動態標籤的着色

您能否指點我正確的方向？

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>

來源

2011-07-04 WebDevHed

我應該補充： '#contained {'' 背景顏色：淺灰色;'' }' 所以你可以更好地看到它... – WebDevHed

我相信我明白你問什麼。給這一個鏡頭：

<!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>

來源

2011-07-04 19:10:45

唉唉，謝謝@NMM ......這就是我一直在尋找的東西！ – WebDevHed

我沒有意識到，當我在手風琴滑塊周圍添加更多結構時，一旦點擊鏈接，就會將我帶到頁面的頂部。我試圖在處理程序的末尾添加'return false;'，但它繼續回到頂部。如果你有時間@NgM，你能再次幫助我嗎？ – WebDevHed

刪除段落標記周圍的錨點標記。，或者讓它指向一個位置，例如菜單所在的容器的頂部等。但是，通過此實現，您不需要該標籤。 –

動態標籤的着色

回答

相關問題