Tab組件自定義 · 河馬編輯器建站手冊

> 首先給Tab組件自定義class ``` /*未激活tab狀態 */ .自定義class .do-tabtext-nav .tabs-style-bar li:not(.cur) { background-color: rgb(254, 254, 254); border: rgb(150, 206, 63) 2px solid; border-radius: 5px; } /*激活tab狀態 */ .自定義class .do-tabtext-nav li.cur { color: rgb(251, 251, 251); border-radius: 5px; border: rgb(150, 206, 63) 2px solid; } /*tab按鈕padding */ .自定義class .do-padding { padding: 5px 16px!important; } ``` Tab預加載切換先傳參數？ ``` <script> $(window).load(function() { var test = window.location.search; if (test=="?bt") { tabChange('yfhu0', 3 ); } else if (test=="?lz") { tabChange('yfhu0', 2 ); } else if (test=="?zb") { tabChange('yfhu0', 1 ); } else if (test=="?xd") { tabChange('yfhu0', 4 ); } else { tabChange('yfhu0', 0 ); } }); </script> ``` ``` <style> .hm-tab .do-nav-float{width:50px;} .hm-tab div.do-element-tabtext-content{ padding-left: 85px;} .hm-tab .do-padding{ border: 1px #ff3300 solid;} .hm-tab .do-lableSize-small>ul>li .do-padding { padding: 6px 5px; } .hm-tab li.cur .des > * { background: #ff0000; color: #fff; } .hm-tab .do-tabtext-nav .des > * { padding: 15px 10px; color: #ff0000; } .hm-tab .do-tabtext-nav ul li { margin-bottom: 20px; } #D-c-12-13-35-36{padding-left: 30px; width: 13.6667%!important;} .owl-stage{} .do-space{z-index: 0!important;} .hm-store .do-title{background-color: rgba(255, 0, 0, 0.6);} .owl-nav .owl-prev{background: url(http://bk.image.styleweb.com.cn/2018/11/15/11825_joij4yhi.png) no-repeat !important; width: 35px; height: 35px; background-size: cover!important;font-size: 0!important;margin-right: 70px;} .owl-nav .owl-next{background: url(http://bk.image.styleweb.com.cn/2018/11/15/11825_joij4yhi.png) no-repeat !important; width: 35px; height: 35px; background-size: cover!important;transform:rotate(180deg);font-size: 0!important;} .owl-nav{position: absolute; top: -40px; right: 10%;} .hm-store-img{padding-left: 20px;} .do-playbtn { cursor: pointer; width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; z-index: 10; opacity: 0.8; background: url(data:image/png;base64,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) 0% 0% / 100% no-repeat; margin: -30px 0px 0px -30px; } </style> <link href="https://cdn.bootcss.com/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"> <script> $(document).ready(function() { $("#swiper_ .do-element-media-ul").addClass("owl-carousel"); $(".hm-store").before("<img class='hm-store-img' src='http://bk.image.styleweb.com.cn/2018/11/15/11825_joij09as.png'>"); $(".hm-store li:first-child .do-middle-center img").before("<div class='do-playbtn' data-video='http://oz4xzffwd.bkt.clouddn.com/45%E7%A7%92%E7%BD%91%E7%AB%99.mp4'></div>"); $(".hm-store1").before("<img class='hm-store-img' src='http://bk.image.styleweb.com.cn/2018/11/15/11825_joijbf05.png'>"); $(".hm-store2").before("<img class='hm-store-img' src='http://bk.image.styleweb.com.cn/2018/11/16/11825_jojwmbkt.png'>"); $('.hm-store .owl-carousel,.hm-store1 .owl-carousel').owlCarousel({ video:true, loop: true, margin: 10, responsiveClass: true, responsive: { 0: { items: 1, nav: true }, 600: { items: 3, nav: false }, 1000: { items: 1.35, nav: true, margin: 0 } } }); $('.hm-store2 .owl-carousel').owlCarousel({ video:true, loop: true, margin: 10, responsiveClass: true, responsive: { 0: { items: 1, nav: true }, 600: { items: 3, nav: false }, 1000: { items: 2.35, nav: true, margin: 0 } } }) }); </script> <script src="https://cdn.bootcss.com/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>** ```