Как сделать так, чтобы стандартный дизайн вкладок материала автоматически воспроизводился? - PullRequest
Новая
       23

Как сделать так, чтобы стандартный дизайн вкладок материала автоматически воспроизводился?

0 голосов
/ 01 июня 2019

Я использую стандартный компонент вкладки «Дизайн материала», найденный здесь: https://material -components.github.io / материал-компоненты-веб-каталог / # / компонент / вкладки

Я добавил некоторые стили к нему, и все, кажется, работает нормально, но теперь мне нужно найти способ для вкладок автоматически воспроизводить каждую из них.

Я использую эту JS Fiddle (http://jsfiddle.net/T8cLe/), чтобы отключить JavaScript, но, похоже, этого недостаточно, чтобы сработал клик. Кажется, он просто заменяет активное цветовое состояние вкладки и класс "tab-info" вообще не переключаются.

HTML 

<div class="container">
    <div class="row" id="tt" data-aos="fade-up" data-aos-duration="800">
        <div class="col s12 tabs-content">
            <ul class="tabs">
                <li class="tab col s2-5"><a class="active" href="#test1"><span class="mdi mdi-48px mdi-clipboard-alert"></span>
                        <div class="tab-name">Incident<br />Response</div>
                    </a></li>
                <li class="tab col s2-5"><a href="#test2"><span class="mdi mdi-48px mdi-shield-account"></span>
                        <div class="tab-name">Security<br />Leadership</div>
                    </a></li>
                <li class="tab col s2-5"><a href="#test3"><span class="mdi mdi-48px mdi-account-supervisor-circle"></span>
                        <div class="tab-name">Security<br />Operations</div>
                    </a></li>
                <li class="tab col s2-5"><a href="#test4"><span class="mdi mdi-48px mdi-search-web"></span>
                        <div class="tab-name">Threat<br />Analysis</div>
                    </a></li>
                <li class="tab col s2-5"><a href="#test5"><span class="mdi mdi-48px mdi-bug"></span>
                        <div class="tab-name">Vulnerability<br />Management</div>
                    </a></li>
            </ul>
        </div>
        <div id="test1" class="tab-info col s12">
            <div class="row vertical-align">
                <div class="col s6 tab-solution-text">
                    <div class="tab-solution-text">
                        <h4>Incident Response</h4>
                        <p>Respond faster to incidents with rapid context around indicators integrated into your incident response or SOAR system.</p>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect btn-ghost rf-button">Learn more <span class="mdi mdi-18px mdi-chevron-right"></span></button>
                    </div>
                </div>
                <div class="col s6 image-block-6">
                    <img src="<?php echo $local ?>/img/tabbed-image-001.png" />
                </div>
            </div>
        </div>
        <div id="test2" class="tab-info col s12">
            <div class="row vertical-align">
                <div class="col s6 tab-solution-text">
                    <div class="tab-solution-text">
                        <h4>Security Leadership</h4>
                        <p>Incorporate threat intelligence into every security process to achieve measurable ROI by increasing security team efficiency and reducing risk. </p>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect btn-ghost rf-button">Learn more <span class="mdi mdi-18px mdi-chevron-right"></span></button>
                    </div>
                </div>
                <div class="col s6 tab-solution-img">
                    <img src="<?php echo $local ?>/img/tabbed-image-002.svg" />
                </div>
            </div>
        </div>
        <div id="test3" class="tab-info col s12">
            <div class="row vertical-align">
                <div class="col s6 tab-solution-text">
                    <div class="tab-solution-text">
                        <h4>Security Operations</h4>
                        <p>Triage alerts faster and reduce alert fatigue with actionable context while alerting on threats in real time - all directly in your SIEM.</p>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect btn-ghost rf-button">Learn more <span class="mdi mdi-18px mdi-chevron-right"></span></button>
                    </div>
                </div>
                <div class="col s6 tab-solution-img">
                    <img src="<?php echo $local ?>/img/tabbed-image-003.svg" />
                </div>
            </div>
        </div>
        <div id="test4" class="tab-info col s12">
            <div class="row vertical-align">
                <div class="col s6 tab-solution-text">
                    <div class="tab-solution-text">
                        <h4>Threat Analysis</h4>
                        <p>Access all available intelligence directly in our portal or integrated into your analysis tools for threat actor tracking, threat analysis, and TTP research.</p>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect btn-ghost rf-button">Learn more <span class="mdi mdi-18px mdi-chevron-right"></span></button>
                    </div>
                </div>
                <div class="col s6 tab-solution-img">
                    <img src="<?php echo $local ?>/img/tabbed-image-004.svg" />
                </div>
            </div>
        </div>
        <div id="test5" class="tab-info col s12">
            <div class="row vertical-align">
                <div class="col s6">
                    <div class="tab-solution-text">
                        <h4>Vulnerability Management</h4>
                        <p>Prioritize patching based on real-time, real-life exploitability intelligence integrated into your vulnerability management system.</p>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect btn-ghost rf-button">Learn more <span class="mdi mdi-18px mdi-chevron-right"></span></button>
                    </div>
                </div>
                <div class="col s6 tab-solution-img">
                    <img src="<?php echo $local ?>/img/tabbed-image-005.svg" />
                </div>
            </div>
        </div>
    </div>
</div>

JS 

$(document).ready(function () {
    setInterval(function () {
        moveRight();
        moveCopy();
    }, 1000);

    function moveRight() {
        var len = $('li.tab a');
        var i = 1;
        $('li.tab a').each(function () {
            i++;
            if ($(this).attr('class') == "active") {
                $(this).next('li.tab a').addClass('active');
                $(this).removeClass('active');
                return false;
            }
            if (len.length == i) {
                $('li.tab a:nth-child(1)').addClass('active');
            }
        });
    }

});

Я надеюсь получить аналогичные результаты для этой демонстрации: https://www.jeasyui.com/tutorial/layout/tabs3.php

Только для компонента Material Design.

...