效果如下 :

不同按鈕點擊後對應不同內容的呈現

此篇不適合新手，新手也不一定要學，新手別因這篇而覺得Elementor門檻高，學夠用的就好了!

準備工作 :

  1. 安裝Elementor Pro
  2. 安裝免費版Addons for Elementor (又名 Livemesh Addons for Elementor )

用的到元素工具 :

  1. 按鈕、
  2. html、
  3. Testimonials Slider 

詳細教學請看影片 : 

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script>

<script>
jQuery( document ).ready( function( $ ) {
//code start

$(“.btn”).each(function() {
$(this).on(“click”, function() {
var bid = $(this).attr(“id”) -1 ;
//alert(bid);
$(“#etext li:eq(“+ bid +”) a “).click();

});
});

//code end
});
</script>


<style>
/*把點點點隱藏*/
.lae-flex-control-nav ,.lae-flex-control-paging
{
visibility: hidden;

}
/*把大引言符號隱藏*/
.lae-icon-quote{
display:none !important;
}

</style>

上面jq程式碼當你複製回去時，請先貼在記事本檢查一下是否「”」有變成全形或奇怪的符號之類的。

其它:

CSS的兩個隱藏屬性比較 :

  • visibility: hidden; →隱藏但html標籤元素不會消失。
  • display:none;→隱藏且html標籤元素會消失。

jQuery 的 eq() :

影片中提到的按鈕的id無法從0開始設，id設成0會有問題，所以id才從1開始設，但jq中的eq( )是從0開始算，eq(0)代表第1個元素，所以才在程式碼中把當下點擊那個按鈕取得到的用id -1 。

在〈不同按鈕點擊後對應不同內容的呈現〉中有 1 則留言

發表留言

▎相關文章