[英]JavaScript button link on one page to show hidden div on another page
I have a home.html and faq.html. 我有一个home.html和faq.html。
The faq page has many questions and their answers listed consecutively down the page. 常见问题页面上有许多问题及其答案在页面下连续列出。 I want the answers hidden until a question is clicked that opens that answer.
我希望隐藏答案,直到单击一个问题以打开该答案。 When another question is clicked, it will close the previous answer and open the new one.
单击另一个问题时,它将关闭前一个答案并打开新的答案。 I'd like to use
slideUp
/ slideDown
or fadeIn
/ fadeOut
for that, but not essential. 我想为此使用
slideUp
/ slideDown
或fadeIn
/ fadeOut
,但这不是必需的。
The home page has a link that when clicked, I want taken to the faq page and also have 'open' a specific answer, both from the one click; 主页上有一个链接,单击该链接后,我想转到常见问题页面,并且单击一次即可“打开”特定答案。
slideDown
or fadeIn
again not essential. slideDown
或fadeIn
再次不是必需的。
Is there a JavaScript that can be used to perform the task? 是否有可用于执行任务的JavaScript? I have seen some posts with
setvisibility
type code somewhat acceptable for the faq page, but not that I can activate from my home page. 我在常见问题页面上看到了一些带有
setvisibility
类型代码的帖子,对于我的常见问题页面来说还是可以接受的,但是我不能从主页上激活它。 I am a novice, so I ask for the html code too that I can insert on both pages. 我是新手,因此我也要求我可以在两个页面上插入的html代码。 A bigger chore than usual I know!
我所知道的比平常还要大! Many thanks.
非常感谢。
NOTE I now see a problem with my idea because of the following. 注意由于以下原因,现在我的想法出现问题。 I didn't mention it before but it would be neccessary.
我之前没有提到它,但这是必要的。 Let me try to explain it.
让我尝试解释一下。 I now find that to have a link on one page open another page at a particular position down that page will correctly position the page to that point IF previous content on that page is not hidden.
现在,我发现,如果没有隐藏该页面上的先前内容,则在该页面上的某个特定位置打开另一页面上的链接将可以正确地将该页面定位到该点。 If previous content is
visibility: hidden;
如果以前的内容是
visibility: hidden;
否则为visibility: hidden;
, that point where the page will open at is innacurate. ,该页面将在该位置打开。 In other words, it opens at a point below intended, a point at which is correct if previous content is not hidden.
换句话说,它在低于预期的位置打开,如果不隐藏先前的内容,则该位置正确。 I hope that makes some sense.
我希望这是有道理的。 I will soon look at whether
display:none;
我将很快查看是否
display:none;
is better suited for this before I look at my original questions. 在我看原始问题之前,它更适合于此。 Thanks to those who have helped me to date, you have spent a lot of time for me.
感谢那些迄今为止帮助我的人,您为我度过了很多时间。
You can add querystring parameters to the request for the faq page and read the querystring using javascript on the faq page. 您可以将querystring参数添加到常见问题页面的请求中,并在常见问题页面上使用javascript阅读查询字符串。 Depending on the parameters you pass, you could do your desired animations.
根据您传递的参数,您可以制作所需的动画。
In home.html : You would create the links with the query string param like so: 在home.html中 :您将使用查询字符串param创建链接,如下所示:
<a href="http://example.com/faq.html?question=125">Link to FAQ</a>
In faq.html : you would need to read the querystring parameter and depending on the value, call the javascript function that actually handles the show/hide of questions. 在faq.html中 :您将需要读取querystring参数,并根据该值调用实际处理问题显示/隐藏的javascript函数。
To read querystring parameters in javascript you need to parse window.location.search
. 要在javascript中读取querystring参数,您需要解析
window.location.search
。 Here is a javascript helper that you can use: 这是您可以使用的JavaScript帮助器:
var QueryString = function () {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]], pair[1] ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
return query_string;
} ();
You can then access QueryString.question 然后,您可以访问QueryString.question
Try this one 试试这个
$(function() {
$('div.answer').hide();
$('a.question').before('<span class="faqplusminus dark nounderline">[+]</span>');
$('a.question').click(function() {
$('div.answer').slideUp('slow', 'easeInOutExpo');
$('span.faqplusminus').html('[+]');
var slidedownelement = $(this).closest('div.faq').find('div.answer').eq(0);
if(!slidedownelement.is(':visible')) {
slidedownelement.slideDown('slow', 'easeInOutExpo');
slidedownelement.parent().find('span.faqplusminus').html('[-]');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.