Question

想要修改此切换功能，以便在再次点击相同的链接时再次收回和隐藏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

提前感谢您的帮助，非常感谢。

Answer 1

试试这个：

$(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.
         }
     });
 }

Answer 2

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

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>

切换div可见性

2 个答案: