您現在的位置是：首頁 > 網站建設 > cms系統

cms系統

帝國cms如何實現有切換選項卡的圖書推薦列表？

電腦迷 2022-04-04 14:53:40cms系統

功能需求：做一個有切換卡效果的信息列表，包含圖片、信息標題，默認第一項顯示圖片和標題，其他只顯示標題。當鼠標移動的時候，能夠自動切換信息。
將下面這段代碼放到內容模板

<div class="a_bktj">

    <p class="bk_title">本目錄推薦</p>

   <ul id="tab">

[e:loop={'selfinfo',9,2,1,0,0}]

    <li <?if($bqno==1){echo 'class="tab-current"';}?>><a href="<?=$bqr[titleurl]?>" target="_blank"><i>0<?=$bqno?></i><img src="<?=$bqr[titlepic]?>" alt="<?=$bqr[title]?>"><p><?=$bqr[title]?></p></a></li>

[/e:loop]

   </ul>

<script>

    $("#tab li").hover(function(){

     var index=$(this).index();

     $(this).parents().next().find(".tab-box").hide().eq(index).show();

     $(this).addClass("tab-current").siblings().removeClass("tab-current");

    });

</script>

</div>

CSS：

<style>

.a_bktj { padding: 20px; }

.a_bktj li { overflow: hidden; border-bottom: 1px solid #f5f2f0; padding-bottom: 10px; margin-bottom: 10px; }

.a_bktj li i { float: left; color: #aaa; font-family: arial; margin-right: 10px; padding-top: 13px; }

.a_bktj li img { max-height: 80px; max-width: 80px; float: left; display: none; }

.a_bktj li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; }

.a_bktj li:hover img { display: block; }

.a_bktj li:hover p { white-space: initial; }

li.tab-current img {display: block;}

li.tab-current p {white-space: initial;}

</style>

實現效果：

點個贊！ ()

云狐網

云狐網

cms系統

帝國cms如何實現有切換選項卡的圖書推薦列表？

帝國cms在列表頁隨機顯示標題圖片，并且壓縮裁剪圖片大小

帝國cms后臺編輯器的換行符，如何將br標簽換成p標簽？

更多相關

相關文章