Question

我一直试图解决这个问题好几天，但我被卡住了。我想做的是以下几点：

当我进入页面时，我有几个链接，点击时应该打开一个链接，同时崩溃并在容器中显示文本。单击链接时，图像将更改。我唯一无法工作的是打开链接，它什么也没做。

如果有人可以帮助我/ thanx，我会很棒。

<script>  
$(document).ready(function(){    
$(".toggle_container").hide();   

$("p.trigger").click(function(){  
$(this).toggleClass("active").next().slideToggle("slow");  
return false;  
});  

});
</script>

<style type="text/css">

p.trigger {  
 padding: 0 0 0 10px;
 margin: 0 0 5px 0;
 background: url(image/arrow.gif) no-repeat;
 height: 21px;
 line-height: 21px;
 width: 230px;
 float: left;
}  
p.trigger a {  
 color: #fff;
 text-decoration: none;
 display: block;
}  
p.trigger a:hover { color: #ccc; }  
p.active {background-position: left bottom;}  
.toggle_container {  
 margin: 0 0 5px;
 padding: 0; 
 overflow: hidden;
 font-size: 1.2em;
 width: 230px;
 clear: both;
}  
.toggle_container .block {  
 padding: 0 0 0 10px;
 margin: 0 0 5px 0;
 font-size:11px;
}  
</style>


<h2>Header</h2> 
<p class="trigger"><a style="color:#000;" href="http://www.loremipsum.com?id=er">&raquo; link</a></p>
<div class="toggle_container">
 <div class="block">
  &raquo; text
 </div>
</div>

Answer 1

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  
    return false;  
});

您的链接没有“去任何地方”的原因是因为onClick事件导致return false。您告诉链接不遵循默认操作，因此它不会跟随链接。

但是，如果您删除了return false，那么每当您点击该链接时，您的网页就会重定向。

我的问题是，您要更改图片还是要在新窗口中打开链接？或者您是否只想将内容加载到页面中？

假设您想在点击链接时更改图像，您需要做的是更改IMG的SRC。

<强> HTML

<h2>Header</h2> 
<p class="trigger">
    <a style="color:#000;" href="http://www.google.com/images/logos/ps_logo2.png">&raquo; link</a></p>
    <div class="toggle_container">
        <div class="block">
            &raquo; text
        </div>
        <img id='img' src="" />
    </div>

<强> JAVASCRIPT

$(document).ready(function(){    
$(".toggle_container").hide();   

    $("p.trigger").click(function(){  
        $(this).toggleClass("active").next().slideToggle("slow");  
              $("#img").attr( 'src', $(this).find("a").attr("href") );

        return false;
    });  

});

如果您想在新窗口中打开链接，只需更改HTML：

<强> HTML

<a style="color:#000;" href="http://www.google.com/" target="_blank">&raquo; link</a></p>

在您的Javascript中，只需删除return false即可遵循默认链接行为。

<强> JAVASCRIPT

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  

});

如果您想将内容加载到页面中：

<强> HTML

<h2>Header</h2> 
<p class="trigger">
    <a style="color:#000;" href="http://www.google.com/" target="_blank">&raquo; link</a></p>
    <div class="toggle_container">
        <div class="block">
            &raquo; text
        </div>
        <div id='load_content'></div>
    </div>

<强> JAVASCRIPT

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  

    var link = $(this).find("a").attr("href");
    console.log(link);
    $("#load_content").load( link  );

    return false;
});

Answer 2

你想在动画完成后打开href吗？如果是这样，您可以使用slideToggle()上的回调来触发window.location事件。

切换时超链接未打开

2 个答案: