Показать сообщение отдельно
  #6 (permalink)  
Старый 07.05.2020, 20:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

multipurpose_tabcontent
Артобстрел,
<!DOCTYPE HTML>
<html>
<head>
        <title>Tab on Right Side jQuery</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bhaveshcmedhekar/multipurpose_tabcontent@master/css/animate.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bhaveshcmedhekar/multipurpose_tabcontent@master/css/style.css" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bhaveshcmedhekar/multipurpose_tabcontent@master/js/jquery.multipurpose_tabcontent.js"></script>
        <script>
$(function() {
    $(".tab_wrapper").champ({
        plugin_type: "tab",
        side: "right",
        active_tab: "1",
        controllers: "false"
    });
    $('.but').on('click', function() {
        var i = this.dataset.i;
        var cls = `#accordion .accordian_header:eq(${i})`;
        $(cls).trigger('click')
    })
});
        </script>
</head>
<body>
        <div class="wrapper">
                <h2>Tab on Right Side</h2>
                <div id="accordion">
            <div class="tab_wrapper second_tab">
                            <ul class="tab_list">
                            <li class="active">Tab 1</li>
                                <li>Tab 2</li>
                                <li>Tab 3</li>
                            </ul>
                        <div class="content_wrapper">
                                <div class="tab_content active">
                                        <h3>Tab content 1</h3>
                                        <p>1</p>
                    <input name="" type="button" value="Go to Tab 3" class="but" data-i="2">
                                </div>
                                <div class="tab_content">
                                        <h3>Tab content 2</h3>
                                        <p>2</p>
                                </div>
                                <div id="MLM" class="tab_content">
                                        <h3>Tab content 3</h3>
                                        <p>3</p>
                     <input name="" type="button" value="Go to Tab 1" class="but" data-i="0">
                                </div>
                        </div>
            </div>
        </div>
</div></body>
</html>
Ответить с цитированием