Якорь в Accordion Plugin With jQuery
Здоровья всем форумчанам!
Никак не могу сделать рабочим якорь (id, name и т.д.) в плагине Responsive Multipurpose Tabs & Accordion Plugin With jQuery. Очень прошу помощи гуру. Рассчитываю на готовое решение в виде кода скрипта - моему мозгу JavaScript не доступен. Сценарий: Вариант Tab on Right Side - меню справа, контент слева. В контенте первого аккордеона (Tab content 1) должен быть рабочий линк на Tab content 3. При этом через меню Tab 1 из Tab content 3 возвращаемся к Tab content 1. И переходить так можно бесконечно. Использовал несколько скриптов, в том числе эти 2: $("#accordion").accordion({ // Called when the widget instance is created. create: function(e, ui) { // The accordion DOM element. var $this = $(this); // Triggered when the browser hash changes. $(window).on("hashchange", function(e) { // The selector string used to find all accordion headers. var headers = $this.accordion("option", "header"), // The header we're looking for, based on the location hash. header = $(location.hash), // The index of the header we're looking for. index = $this.find(headers).index(header); // If there's a valid index, activate the accordion section. // Otherwise, do nothing. if (index >= 0) { $this.accordion("option", "active", index); } }); // Make sure this works on initial page load. $(window).trigger("hashchange"); } }); $(document).ready(function() { $("#accordion").accordion({ active: false, collapsible: true, autoHeight: false, navigation: true, header: 'a.menuitem' }); $(".menuitem").click(function(event){ window.location.hash=this.hash; }); //get the hash value var locationHash = window.location.hash; //split the value var hashSplit = locationHash.split('#'); //get the tab number var currentTab = hashSplit[1]; window.setTimeout(function(){ //open the tab for the current hash $("#accordion").accordion({ active: parseInt(currentTab)-1 }); }, 1000); }); <html> <head> <title>Tab on Right Side jQuery</title> <link rel="stylesheet" type="text/css" href="css/animate.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="js/jquery.multipurpose_tabcontent.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".first_tab").champ(); $(".accordion_example").champ({ plugin_type: "accordion", side: "left", active_tab: "3", controllers: "true" }); $(".second_tab").champ({ plugin_type: "tab", side: "right", active_tab: "1", controllers: "false" }); $(".third_tab").champ({ plugin_type: "tab", side: "", active_tab: "4", controllers: "true", ajax: "true", show_ajax_content_in_tab: "4", content_path: "html.txt" }); $(".multipleTab").champ({ //plugin_type : "accordion", multiple_tabs: "true" }); }); </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> <a href="#MLM">Go to Tab 3</a> </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> </div> </div> </div> </div> </div></body> </html> Демо плагина + скачать: https://www.jqueryscript.net/plus/search.php?kwtype=0&keyword=Responsive+Multipurpos e+Tabs+%26+Accordion+Plugin+With+jQuery Если у кого есть возможность, помогите пожалуйста. |
Артобстрел,
подожду переводчика. |
Извините, Вы не поняли чего я хотел?
|
Никакая мной испробованная ссылка в Tab content 1 не переключает на Tab content 3.
|
Артобстрел,
это кнопка <input name="" type="button" value="to 3" class="but" data-i="2"> это код $('.but').on('click', function() { var i = this.dataset.i; var cls = `#accordion li:eq(${i})`; $(cls).trigger('click') }) |
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> |
Огромное СПАСИБИЩЕ!!! ВСЁ заработало как надо. Оперативно работаете, очень к Вам с большим уважением остался.
|
Часовой пояс GMT +3, время: 17:31. |