這樣寫CSS、jQuery可能不是最正確的,但我只會基本寫法,先記錄下來
產品選單: [ebike]、[bicycle]、[racket]、[ski]
有共通的 css=”gallery-item-thumbnail-wrap”
點擊所選的產品後顯示相關說明並隱藏其他產品說明

/*自訂css內容,ebike、bicycle、racket、ski的描述預設全隱藏*/
.ebike,.bicycle,.racket,.ski {
display:none;
}
/*----------自訂js內容----------*/
<script>
jQuery(document).ready(function( $ ){
##點ebike,顯示ebike詳細說明,其他隱藏
jQuery(".gallery-item-thumbnail-wrap:eq(0)").click(function(){
jQuery(".ebike").css("display","inline");
jQuery(".bicycle,.racket,.ski").css("display","none");
});
jQuery(".gallery-item-thumbnail-wrap:eq(1)").click(function(){
jQuery(".ebike,.racket,.ski").css("display","none");
jQuery(".bicycle").css("display","inline");
});
jQuery(".gallery-item-thumbnail-wrap:eq(2)").click(function(){
jQuery(".ebike,.bicycle,.ski").css("display","none");
jQuery(".racket").css("display","inline");
});
jQuery(".gallery-item-thumbnail-wrap:eq(3)").click(function(){
jQuery(".ebike,.bicycle,.racket").css("display","none");
jQuery(".ski").css("display","inline");
});
});
</script>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *