超鏈接不能打開時切換

Question

我一直試圖解決這個問題，現在幾天，但我卡住了。我想要做的是以下幾點：

當我進入該頁面時，我有幾個鏈接，點擊時應該打開一個鏈接，同時在容器中顯示文本。點擊鏈接時，圖像會更改。我無法工作的唯一的事情是鏈接的開放，它什麼都不做。

我會是非常美妙的，如果有人可以幫助我/感謝名單

<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

你要打開的HREF該動畫完成後？如果是這樣，您可以使用slideToggle()上的回叫來觸發window.location事件。

Answer 2

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