jQuery 选项卡打开和滚动答案

【问题标题】：jQuery tabs open and scrolljQuery 选项卡打开和滚动
【发布时间】：2014-08-07 13:41:11
【问题描述】：

我在下面我的网站上使用 jqueryResponsiveTabs 来创建在某个角度变成手风琴的标签。

在下面的链接中有一个选项卡区域，在移动设备上变成手风琴。顶部的个性化按钮应打开“您需要了解的内容”部分中的“个性化”选项卡，并将页面向下滚动到该区域。

我可以让它打开标签，但我不能让它向下滚动。

有什么想法吗？

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> &pound;<span class="current_price_amount">xx</span></span>
                    <span class="previous_price">was &pound;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">&pound;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">&pound;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">&pound;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 &#187;</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>

【问题讨论】：

你能发布一些你的代码吗？
我已经在上面添加了我的代码 - 谢谢
当我单击个性化按钮时，它会向下滚动，但不会打开选项卡。你说“我可以让它打开标签，但我不能让它向下滚动。”你的意思是相反的吗？
不，我的确实打开了标签，但没有向下滚动
哦，我现在明白了。我想是因为我在swimmingcover.co.uk/bag/test.html#tab-2这个页面上的时候，当你点击个性化按钮时，它会向下滚动，但是标签已经打开了。

标签： jquery tabs responsive-design

【解决方案1】：

从以下位置更改您的 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>

【讨论】：

感谢 blubberguy22 - 我不完全确定我需要在我的代码中更改什么？
您在代码中的哪个位置更改了活动选项卡？
当一个标签被点击时，URL 会附加一个#tabnumber，具体取决于点击的标签
好的，JavaScript 有没有办法在不附加 URL 的情况下打开和关闭选项卡？
您也可以保持原样并将window.scrollTo(document.getElementById('targetTab').getBoundingClientRect()); 添加到选项卡中，如果选项卡已打开或者它是当前附加的选项卡，则会发生这种情况。