創建使用jQuery

常見問題縮寫我想FAQ頁面這樣http://videoguard.pt/en/support/#section2 創建使用jQuery

我這樣做

THIS IS MY 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 [email protected] 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 [email protected] as soon as possible. We will try to cancel/modify your order before it is mailed out.</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

THIS IS MY 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指導我如何做到這一點

來源

2014-02-25 user3278839

你不堅持我的朋友。你還沒有啓動呢。在你的情況下，你甚至不需要jQuery，只需使用CSS樣式來嘗試它。 – Praveen

aaah !!同樣的問題！檢查這個鏈接。 'http：// stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery'。 –

如何處理CSS，但我想要幻燈片效果檢查此鏈接我想要這樣http://videoguard.pt/en/support/#section2 – user3278839

對於滑動效果使用jquery UI

DEMO

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

來源

2014-02-25 06:57:47 Manoj

嘗試...

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

來源

2014-02-25 06:52:07 Abhineet

你有一個小腳本的問題。試試這個：

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

來源

2014-02-25 06:56:10

創建使用jQuery

回答

相關問題