用jquery创建faq缩写
用jquery创建faq缩写
提问于 2014-02-25 06:37:52
我想要像这个http://videoguard.pt/en/support/#section2一样的faq页面
我要这么做
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>FAQ ACRONYM</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<div id="main">
<div id="section1">
<ul class="sec1-style">
<li><a href="#f1">I completed the payment process online but did not receive an order confirmation. Did you receive my order?</a></li>
<li><a href="#f2">I still have not received my items, when will I get them?</a></li>
<li><a href="#f3">How do I change my address?</a></li>
<li><a href="#f4">How do I cancel/change my order?</a></li>
</ul>
</div>
<div id="section2">
<ul>
<li id="f1"><p>If you have received an on-page confirmation, this means your order did go through. Do check your spam box to see if your order confirmation was filtered there by your email server.</p></li>
<li id="f2">On average, local deliveries should reach within 1-3 working days. If has been more than 3 working days, do send us an email with the delivery address and invoice number so we can do a status check for you.</li>
<li id="f3">Log in with your Handymon account and update the changes under my personal details. However if you have just purchased under your old address and would like to re-direct the package, please drop us an email at askme@handymon.com as soon as possible. We will try to cancel/modify your order before it is mailed out.</li>
<li id="f4">Please drop us an email at askme@handymon.com as soon as possible. We will try to cancel/modify your order before it is mailed out.</li>
</ul>
</div>
</div>
</body>
</html>这是我的CSS
#main
{
width:100%;
height:600px;
margin:auto;
}
#section1
{
width:50%;
height:600px;
float:left;
border:2px solid red;
border-radius:5px;
}
#section2
{
width:49%;
height:600px;
float:right;
border:2px solid grey;
border-radius:5px;
}帮我，我被困住了，我想这样做，http://videoguard.pt/en/support/#section2指导我怎么做
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-25 06:57:47
对于幻灯片效果，使用jquery
演示
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var link= $(this).attr("href");
$("#section2 ul li").hide();
$(link).show("blind");
});
});Stack Overflow用户
发布于 2014-02-25 06:52:07
试试吧..。
<script>
$(document).ready(function(){
$('#section2 ul li').hide();
$('#section2 ul li:first').show();
$("a").click(function(){
var target = $(this).attr('href');
$('#section2 ul li').hide();
$(target).toggle();
});
});
</script>Stack Overflow用户
发布于 2014-02-25 06:56:10
你的剧本有点小问题。试试这个：
$(document).ready(function(){
$("#section2 li:not(:first)").hide();
$("a").click(function(){
$("#section2 li").hide();
$($(this).attr("href")).toggle();
return false;
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22006502
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号