我在我的网站上使用jqueryResponsiveTabs来创建在某个视点成为手风琴的标签。
在下面的链接上有一个标签区域，在移动设备上变成手风琴。顶部的个性化按钮应打开“个性化”按钮。选项卡中您需要了解的内容＆＃39;部分并将页面向下滚动到此区域。
我可以打开标签，但我无法向下滚动。
有什么想法吗？
http://www.swimmingcover.co.uk/bag/test.html
以下是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Tangible Simple - Heart Trinket</title>
<link href="http://www.swimmingcover.co.uk/bag/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://www.swimmingcover.co.uk/bag/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="http://www.swimmingcover.co.uk/bag/css/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.swimmingcover.co.uk/bag/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://www.swimmingcover.co.uk/bag/css/frame.css" />
<link type="text/css" rel="stylesheet" href="http://www.swimmingcover.co.uk/bag/css/navigation.css" />
<link type="text/css" rel="stylesheet" href="http://www.swimmingcover.co.uk/bag/css/product.css" />
<link type="text/css" rel="stylesheet" href="http://www.swimmingcover.co.uk/bag/css/style.css" />
<link type="text/css" rel="stylesheet" href="http://www.swimmingcover.co.uk/bag/css/animation.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.swimmingcover.co.uk/bag/js/modernizr.js"></script>
<script type="text/javascript" src="http://www.swimmingcover.co.uk/bag/js/responsive.js"></script>
<script type="text/javascript" src="http://www.swimmingcover.co.uk/bag/js/jquery.mmenu.js"></script>
<script src="http://www.swimmingcover.co.uk/bag/js/jquery.responsiveTabs.js" type="text/javascript"></script>
<script src="http://www.swimmingcover.co.uk/bag/js/jquery.bxslider.min.js"></script>
<script src="http://www.swimmingcover.co.uk/bag/js/charCount.js" type="text/javascript"></script>
</head>
<body id="product" class="tangible">
<main id="content" class="container">
<!--Breadcrumb Menu-->
<nav class="fw_col" id="breadcrumb">
<a title="Home" href="/">Home</a>
<span class="pipe">›</span>
<a title="Afternoon Tea" href="">Gifts</a>
</nav>
<div class="fw_col">
<div id="col_prd_fw">
<h1 class="product_title fontgeomedium">Personalised Heart Trinket Box</h1>
<span class="product_code">Product code: 10225745</span>
<div class="top_review_summary mobile">
<span class="star_rating"><img src="images/product/reviews_star.png" width="64" height="14" alt="5 out of 5" /></span>
<span class="star_count">4.2 out of 5 (based on 263 reviews)</span>
</div>
</div>
<div id="col_prd_lft">
<div id="prd_img_area">
<img src="images/product_images/test.jpg" alt="Product Title" />
</div>
</div>
<div id="col_prd_rgt">
<h1 class="product_title fontgeomedium">Test Product</h1>
<span class="product_code">Product code: xxxxxxxx</span>
<div class="top_review_summary">
<span class="star_rating"><img src="images/product/reviews_star.png" width="64" height="14" alt="5 out of 5" /></span>
<span class="star_count">4.2 out of 5 (based on 263 reviews)</span>
</div>
<div id="short_desc">
Test product
</div>
<ul id="prd_overview">
<li>Overview bullet</li>
<li>Overview bullet</li>
<li>Overview bullet</li>
<li>Overview bullet</li>
</ul>
<div id="price_area">
<span class="current_price"><span class="current_price_prefix">just</span> £<span class="current_price_amount">xx</span></span>
<span class="previous_price">was £xx</span>
</div>
<a class="button personalise tab-link" id="prd_page" href="#tab-2"><span>Personalise</span></a>
<ul id="prd_overview" class="mobile">
<li>Overview bullet</li>
<li>Overview bullet</li>
<li>Overview bullet</li>
<li>Overview bullet</li>
</ul>
</div>
<div id="prd_tabbed_area" class="product_area" style="padding-top:250px;">
<h3 class="fontgeomedium">What you need to know</h3>
<div class="prd_tabbed_area_inner">
<div id="product_tabs">
<ul>
<li><a href="#tab-1">About <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></a></li>
<li><a href="#tab-2">Personalise <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-down"></i></i><i class="fa fa-chevron-up"></i></a></li>
<li><a href="#tab-3">Fine Print <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-down"></i></i><i class="fa fa-chevron-up"></i></a></li>
<li><a href="#tab-4">Delivery <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-down"></i><i class="fa fa-chevron-up"></i></a></li>
</ul>
<div id="tab-1" class="about_content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
</p>
</div>
<div id="tab-2" class="personalise_content">
<div id="tangible_personalisation">
<h4 class="personalise_prd_ttl">Lorem Ipsum is simply dummy text of the printing and typesetting:</h4>
<span class="personalise_intro">Lorem Ipsum is simply dummy text of the printing and typesetting:</span>
<form>
<span class="form_row">
<label>Line one* </label>
<input type="text" id="message1" placeholder="(e.g. Happy Birthday)" onfocus="this.placeholder = ''" onblur="this.placeholder = '(e.g. Happy Birthday)'" class="form-control" />
</span>
<span class="form_row">
<label>Line two* </label>
<input type="text" id="message1" placeholder="(e.g. Happy Birthday2)" onfocus="this.placeholder = ''" onblur="this.placeholder = '(e.g. Happy Birthday2)'" class="form-control" />
</span>
<span class="form_row">
<label>Line three* </label>
<input type="text" id="message1" placeholder="(e.g. Happy Birthday3)" onfocus="this.placeholder = ''" onblur="this.placeholder = '(e.g. Happy Birthday3)'" class="form-control" />
</span>
</form>
<span class="required_text">Fields marked with an * are required and must be completed</span>
<a class="button buynow tab-link" id="prd_page" href="#personalise_area"><span>BUY NOW</span></a>
</div>
</div>
<div id="tab-3" class="fineprint_content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
</p>
</div>
<div id="tab-4" class="delivery_content">
<div id="delivery_table">
<div id="table_del_header">
<span class="del_type">Delivery Type</span>
<span class="del_time">Delivery Time</span>
<span class="del_price">Price</span>
</div>
<div id="table_del_row">
<span class="del_type">
<span class="delivery_title"><i class="icon-truck"></i>Standard UK Delivery</span>
<span class="delivery_details">(Please allow 4 to 7 working days for delivery. An exact delivery date cannot be guaranteed.)</span>
</span>
<span class="del_time">4-7 working days</span>
<span class="del_price">£3.76</span>
</div>
<div id="table_del_row">
<span class="del_type">
<span class="delivery_title"><i class="icon-truck"></i>Express UK Delivery</span>
<span class="delivery_details">
(Please allow up to 2 working days for this product to arrive. Due to the personalised nature of this product a specific delivery date cannot be guaranteed. )
</span>
</span>
<span class="del_time">1-2 working days</span>
<span class="del_price">£8.50</span>
</div>
</div>
</div>
</div>
<span class="prd_lower_cta">
<a href="">
<span class="prd_ttl fontgeomedium">Test Product - <span class="prd_price">£xx</span></span>
<span class="button personalise" id="prd_page_cta" href="#"><span>Personalise</span></span>
</a>
</span>
</div>
</div>
<div id="prd_reviews">
<h3 class="fontgeomedium">Customer Reviews <i class="fa fa-chevron-down"></i></h3>
<div class="reviews_summary">
<span class="star_rating"><img src="images/product/reviews_star.png" width="64" height="14" alt="5 out of 5" /></span>
<span class="star_count">4.2 out of 5</span>
<span class="star_recommended">173 out of 203 (85%) reviewers would recommend this product to a friend.</span>
</div>
<div class="reviews_actions">
<span class="review_write"><a href="">Write a review »</a></span>
<span class="review_order">
<span>Choose a sort order</span>
<select>
<option value="Choose A Sort Order">Choose A Sort Order</option>
<option value="Rating High to Low">Rating High to Low</option>
<option value="Featured Reviews First">Featured Reviews First</option>
</select>
</span>
</div>
<div class="reviews_hidden_area">
hidden review area
</div>
</div>
</div>
</main>
<script type="text/javascript">
$(document).ready(function () {
$('#product_tabs').responsiveTabs({
rotate: false,
//startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
//disabled: [3],
active: 0
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
从：
更改您的jQuery脚本<script type="text/javascript">
$(document).ready(function () {
$('#product_tabs').responsiveTabs({
rotate: false,
//startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
//disabled: [3],
active: 0
});
});
</script>
要：
<script type="text/javascript">
$(document).ready(function () {
$('#product_tabs').responsiveTabs({
rotate: false,
//startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
//disabled: [3],
active: 0,
activate: function(event, tab){
window.scrollTo(tab.id.getBoundingClientRect());
}
});
});
</script>