Здоровья всем форумчанам!
Никак не могу сделать рабочим якорь (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
Если у кого есть возможность, помогите пожалуйста.
