Question

我想要像http://videoguard.pt/en/support/#section2

这样的常见问题页面

我正在做这个

这是我的HTML代码

<!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指导我如何做到这一点

Answer 1

试试吧......

<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>

Answer 2

您有一个小脚本问题。试试这个：

$(document).ready(function(){
    $("#section2 li:not(:first)").hide();
    $("a").click(function(){
        $("#section2 li").hide();
        $($(this).attr("href")).toggle();
        return false;
    });
});

Answer 3

对于幻灯片效果，请使用 jquery UI

<强> DEMO

$(document).ready(function(){
  $("a").click(function(e){
      e.preventDefault();
     var link= $(this).attr("href");
     $("#section2 ul li").hide();
     $(link).show("blind");
  });
});

使用jquery创建faq首字母缩略词

3 个答案: