हाइपरलिंक टॉगल करते समय नहीं खोल रहा - jquery, hyperlink, टॉगल

मैं अब दिनों के लिए इस समस्या को हल करने की कोशिश कर रहा हूं, लेकिन मैं अटक गया हूं। मैं जो करना चाहता हूं वह निम्नलिखित है:

जब मैं पेज में प्रवेश करता हूं तो मेरे पास कुछ लिंक हैंजब क्लिक किया गया तो एक लिंक खोलना चाहिए और साथ ही साथ संकुचित करना और कंटेनर में टेक्स्ट दिखाना चाहिए। जब लिंक क्लिक किया जाता है तो एक छवि बदल जाती है। एकमात्र चीज जो मैं काम नहीं कर पा रहा हूं वह लिंक खोलना है, यह कुछ भी नहीं करता है।

अगर कोई मुझे / 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>

उत्तर:

उत्तर № 1 के लिए 1

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

आपका लिंक "कहीं भी जा रहा" क्यों नहीं है, क्योंकि आपके पर onClick आपके पास घटना है return false। आप लिंक को इसके डिफ़ॉल्ट क्रिया का पालन न करने के लिए कह रहे हैं, इसलिए यह लिंक का पालन नहीं करेगा।

हालांकि, अगर आप हटा देते हैं return false, फिर जब भी आप लिंक पर क्लिक करते हैं, तो आपका पृष्ठ बस रीडायरेक्ट होगा।

मेरा सवाल है, क्या आप एक छवि बदलना चाहते हैं या आप एक नई विंडो में लिंक खोलना चाहते हैं? या आप सिर्फ पृष्ठ में सामग्री लोड करना चाहते हैं?

---

यह मानते हुए कि जब आप लिंक को क्लिक करते हैं तो आप छवि को बदलना चाहते हैं, आपको अपने आईएमजी के एसआरसी को बदलना है।

एचटीएमएल

<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="/images/" />
</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;
});

});

---

यदि आप एक नई विंडो में लिंक खोलना चाहते हैं, तो बस अपना एचटीएमएल बदलें:

एचटीएमएल

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

अपने जावास्क्रिप्ट में, बस अपना हटा दें return false डिफ़ॉल्ट लिंक व्यवहार का पालन करने के लिए।

JAVASCRIPT

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

});

---

और यदि आप पृष्ठ में सामग्री को लोड करना चाहते हैं:

एचटीएमएल

<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;
});

---

जवाब के लिए 0 № 2

क्या आप एनीमेशन पूरा होने के बाद href खोलना चाहते हैं? यदि ऐसा है, तो आप कॉलबैक का उपयोग कर सकते हैं slideToggle() आग लगाना window.location घटना।

---