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 回答