1

このトグル機能を変更して、同じリンクが再度クリックされたときにdivコンテンツが撤回されて再び非表示になるようにし、別のリンクがクリックされたときにそのリンクに関連付けられたコンテンツが下にスライドする前に完全に撤回されるようにします。

また、コンテンツが表示されているときにリンクを別の色に変更する方法も知りたいです。

<!DOCTYPE html>
<html lang="en">

<head>
<script type="text/javascript"     
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function slideonlyonee(thechoseone) {
 $('.newframe').each(function(index) {
      if ($(this).attr("id") == thechoseone) {
           $(this).delay(400).slideDown(500);
      }
      else {
           $(this).slideUp(500);
      }
 });
}

</script>

</head>
<body>

<!--COMEDY STARTS HERE-->
<div style="position:relative; top:2px; left:10px;"> 
<a id="myframe" style="text-decoration: none; "   
href="javascript:slideonlyonee('newframe2');"><span style="color:blue;">comedy</span>
</a>

<div class="newframe" id="newframe2" style="background: blue; display:none; block;   
padding: 5px; width: 450px; height:500px; position: relative; left:-5px; top:60px;">
</div>
</div>

<!--DRAMA STARTS HERE-->        
<div style="position:absolute; top:10px; left:144px;"> 
<a id="myframe"  style="text-decoration: none;" 
href="javascript:slideonlyonee('newframe3');"><span style="color:red;">drama</span></a>

<div class="newframe" id="newframe3" style="background:  red; display:none; block;    
padding: 5px; width: 450px; height:500px; position: relative; left:-131px; top:60px;">
</div>
</div>

<!--CRIME STARTS HERE-->
<div style="position:absolute; top:10px; left:283px;"> 
<a id="myframe" style="text-decoration: none;" 
href="javascript:slideonlyonee('newframe4');"><span style="color:green;">crime</a>

<div class="newframe" id="newframe4" style="background:  green; display:none; block; 
padding: 5px; width: 450px; height:500px; position: relative; left:-270px; top:60px;">
</div>
</div>

<!--MAKEOVER STARTS HERE-->
<div style="position:absolute; top:10px; left:407px;"> 
<a id="myframe" style="text-decoration: none;" 
href="javascript:slideonlyonee('newframe5');"><span style="color:purple;">makeover</a>

<div class="newframe" id="newframe5" style="background:  purple; display:none; block;   
padding: 5px; width: 450px; height:500px; position: relative; left:-394px; top:60px;">
</div>
</div>

</body>

</html>

これが作業コードです

助けてくれてありがとう、それは大いに感謝します。

4

2 に答える 2

2

これを試して：

$(this).delay(400).slideToggle(500); //<---instead toggle the slide

$('[class="'+thechoseone+'"] span').css({'color':'orange', 'font-weight':'bold'});
//---------------------------^^^^---add this too.

id代わりに、無効な使用であるすべてのリンクについて同じことがありますclass。

したがって、最終的なhtmlリンクは次のようになります。

<a class="myframe"

およびjQuery:

function slideonlyonee(thechoseone) {
    $('.newframe').each(function(index) {
        if ($(this).attr("class") == thechoseone) {
             $(this).delay(400).slideToggle(500);
             $('[class="'+thechoseone+'"] span').css({'color':'orange', 'font-weight':'bold'});
             //---------------------------^^^^---add this too.
         }
     });
 }
于 2013-02-22T05:40:28.817 に答える
1

これはあなたが探している解決策かもしれません:

function slideonlyonee( theLink,thechoseone ) {

   theLink.css('color','red');
    var theChosendDiv=$("#"+thechoseone);
    $(".newframe:not(#"+thechoseone+")").slideUp(500);

    theChosendDiv.delay(400).slideToggle(500);
}

html は次のようになります。

<a id="myframe" style="text-decoration: none; "   
href="javascript:slideonlyonee(this,'newframe2');"><span style="color:blue;">comedy</span>
</a>
于 2013-02-22T05:39:05.643 に答える