[英]How to change content of a Div on clicking image link?
我正在創建具有兩個列的布局。
一個具有圖像和第二個內容。 現在我想,每當用戶單擊圖像時,第二列中的內容都會更改。
HTML
<div class="col-sm-6">
<div class="row" style="width: 75%;margin: 0 auto;">
<div class="col-xs-6">
<a href="#" class="p1"><span id="image1"><b>Planning</b></span></a>
</div>
<div class="col-xs-6">
<a href="#" class="p2"><span id="image2"><b>Results</b></span></a>
</div>
</div><br>
<div class="row" style="width: 75%;margin: 0 auto;">
<div class="col-xs-6">
<a href="#" class="p3"><span id="image3"><b>Improvements</b></span></a>
</div>
<div class="col-xs-6">
<a href="#" class="p4"><span id="image4"><b>Communication</b></span></a>
</div>
</div>
<div class="st">
<div class="planning">
<h3>Planning</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
<div class="results">
<h3>Results</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
<div class="improvements">
<h3>Improvements</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
<div class="communication">
<h3>Communication</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
</div>
<div class="col-sm-6 how-text">
</div>
CSS
.st { display:none; }
.how-text { min-height: 300px;
height: auto;
background-color: #e6ebe4;
padding: 20px;
margin: 25px 0px 10px 0px;
border-radius: 3px; }
jQuery的
$(document).ready(function() {
$('.p1').click(function(){
$('.how-text').html($('.planning').html());
});
$('.p2').click(function(){
$('.how-text').html($('.results').html());
});
$('.p3').click(function(){
$('.how-text').html($('.improvements').html());
});
$('.p4').click(function(){
$('.how-text').html($('.communication').html());
});
});
在小提琴中嘗試一下
您可以在div內部訪問,因為它沒有顯示。 您可以使用
.st {height:0;overflow:hidden;}
而不是顯示:無
https://jsfiddle.net/19suymt4/2/
它可以是您的解決方案
您沒有在代碼中添加jquery。 另外,您可以將4個點擊事件的范圍縮小為單擊事件:
$('a').click(function () {
$('.how-text').html($('.st div:eq('+$('.row > div').index($(this).parent())+')').html());
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.