[英]Toggle DIV and SPAN text onclick
我已經嘗試模仿這個網站http://www.designrattan.co.uk/daybed/apple已有一段時間了。
我需要制作一個頁面,客戶可以單擊“ View 360”,然后它更改DIV以顯示產品360(我已經有相應的代碼)。
我還需要這樣做,以便單擊它時跨度文本然后更改為“返回圖像”
我已經嘗試了很多次,但未能使Javascript代碼和HTML協同工作。 我的努力可以在這里看到: http : //designliving.tk/winchester-rattan-garden-round-table-set
如您所見,這是一次完全失敗,因為它不會更改DIV,而只是顯示一個新的DIV。 同樣,當您單擊按鈕時,它將變為文本而不是新按鈕。
我當前的代碼在這里:
<div id="product_images">
<div id="product_image_preview_holder" class="clearfix">
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "hello";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<a id="displayText" href="javascript:toggle();" class="s_button_1 s_main_color_bgr" style="<?php if ($tbData->is_mobile == '0'): ?>position: relative;<?php else: ?>position: absolute;<?php endif; ?> z-index:99999;">
<span class="s_text s_icon_24"><span class="s_icon"></span> View 360</span></a>
<div id="toggleText" style="display: none; position: relative; z-index:99998;" ><?php if ($tags): ?><link rel="stylesheet" type="text/css" href="magic360/magic360/magic360.css" /><script type="text/javascript" src="magic360/magic360/magic360.js"></script><?php foreach ($tags as $tag): ?><center><a class="Magic360" href="#" onclick="return false;" rel="columns:15; filename:<?php echo $tag['tag']; ?>-{col}.jpg;" id="bar"><img src="magic360/images/apple/<?php echo $tag['tag']; ?>-01.jpg"/ ></a></center><?php endforeach; ?><?php else: ?><?php endif; ?>
</div>
</div>
</div>
雖然我覺得上面的代碼很亂,因為我一直在擺弄它,嘗試使其正常工作?!
您可以使用jQuery輕松完成此操作:
$('#toggleDiv').toggle(function() {
$('#img360').hide();
$('#imgNormal').show();
$(this).html('View 360');
}, function() {
$('#img360').show();
$('#imgNormal').hide();
$(this).html('Hide');
});
的jsfiddle
http://jsfiddle.net/LDVun/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.