gpt4 book ai didi

javascript - url jquery Accordion 中没有主题标签

转载 作者:行者123 更新时间:2023-11-28 07:19:27 24 4
gpt4 key购买 nike

下面是一个完美运行的 Accordion 代码。我不想使用主题标签,因为它会破坏我们当前的网站。有没有办法在 Accordion 中使用无主题标签的网址?我尝试使用“?”但是,使用 url 访问 Accordion 时它不起作用?这可能吗?

所以我们的想法是当我有这样的网址时能够打开 Accordion :

来自:test.html#Link1 到:test.html?Link1,它不一定是问号,我只是尝试看看,它可以是主题标签以外的任何内容。谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {

var $accordion = $("#accordion").accordion({active: false, collapsible: true}),
hashId = 0;

if (window.location.hash) {
$accordion.children('h3').each(function(i){
var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
this.id = txt;
if (txt === window.location.hash.slice(1)) {
hashId = i;
}
});

$accordion.accordion({
active: hashId,
animate: true,
heightStyle: 'content',
collapsible: true,
create: function( event, ui ) {
$accordion.children('h3').each(function(i){
$(this).before('<a class="accordion-link link" data-index="' + i + '" href="?' + this.id + '"></a>');
});
$accordion.find('.accordion-link').click(function(){
$accordion.accordion( "option", "active", $(this).data('index') );
});
}
});
}
});
</script>
</head>

<body>

<div id="accordion">
<h3><a href="?link1">Link1</a></h3>
<div>content</div>

<h3><a href="?link2">Link2</a></h3>
<div>content</div>
</div>
</body>
</html>

最佳答案

您可以使用 test.html?section=Link1 格式的 URL。您只需要停止使用哈希,并提取 queryString 参数 as explained here 。结果代码类似于:

<script type="text/javascript">
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

$(function() {

var $accordion = $("#accordion").accordion({active: false, collapsible: true}),
hashId = 0,
section = getParameterByName('section');

if (section) {
$accordion.children('h3').each(function(i){
var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
this.id = txt;
if (txt === section) {
hashId = i;
}
});

$accordion.accordion({
active: hashId,
animate: true,
heightStyle: 'content',
collapsible: true,
create: function( event, ui ) {
$accordion.children('h3').each(function(i){
$(this).before('<a class="accordion-link link" data-index="' + i + '" href="?' + this.id + '"></a>');
});
$accordion.find('.accordion-link').click(function(){
$accordion.accordion( "option", "active", $(this).data('index') );
});
}
});
}
});
</script>

关于javascript - url jquery Accordion 中没有主题标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30471674/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com