切换div的可见性

想要修改此切换功能，以便在同一链接再次单击时收缩div内容并再次隐藏，以及在与该内容关联的内容之前单击不同链接时完全缩回链接下滑。切换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>

HERE'S THE WORKING CODE

在此先感谢您的帮助，它的大加赞赏。

来源

2013-02-22 Charlie Parker

这可能是你正在寻找的解决方案：

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-22 05:39:05 luckystars

试试这个：

$(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-22 05:40:28 Jai

非常感谢你宰，工作就像一个魅力！ – 2013-02-22 05:48:17

太好了！很高兴帮助你。 – Jai 2013-02-22 05:49:16

这就是我实施你的建议的方式。（this）.attr（“id”）== thechoseone）{ $（this。）.delay（）。（this。）.delay（）（400）.slideToggle（500）; // <--- instead 切换幻灯片 } else { $（this）.slideUp（500）; } }）; } – 2013-02-22 05:54:32

切换div的可见性

回答

相关问题