如何在頁面中同時包含jQuery UI選項卡和LiquidSlider庫？

Question

我正在嘗試建立一個具有動態內容區域的網站，該網站應使用Liquid Slider javascript庫在帖子之間導航，並使用jQuery UI選項卡在每個帖子內的選項卡之間切換。 以前這些選項卡工作正常，但是現在我包括了Liquid Slider，滑動效果有效，但這些選項卡不起作用。 javascript控制台上沒有錯誤。

這是網站（單擊“ Viaturas”以導航至我正在談論的區域）。

這是我的頭文件的一部分：

<head>
    (...)
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.liquid-slider-custom.min.js" type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(function($) { (...)
         /* Slide navigation*/
            $('#slider-id').liquidSlider();

            /* Tabs navigation*/
            $("#tabs").tabs();

這是HTML的一部分：

<div class="liquid-slider" id="slider-id">
?php $i = 0; if ($pageposts): ?>
    <?php global $post; ?>
        <?php foreach ($pageposts as $post): ?>
            <?php setup_postdata($post); ?>
            <div>
                <div class='vehicle-model-box'>
                    <span class='car-brand'>".get_post_meta(get_the_ID(),'custom_field_ID_2', true)."</span>
                    <span class='car-model'>".get_post_meta(get_the_ID(),'custom_field_ID_3', true)."</span>
                </div>
                <div id='tabs'>
                    <div class='vehicle-menu-box'>
                        <ul>
                            <li class='car-menu-item-first'><a href='#tab-caracteristicas'>CARACTERÍSTICAS</a></li>
                            <li class='car-menu-item'><a href='#tab-exterior'>EXTERIOR</a></li>
                            <li class='car-menu-item'><a href='#tab-interior'>INTERIOR</a></li>
                            <li class='car-menu-item'><a href='#tab-seguranca'>SEGURANÇA</a></li>
                            <li class='car-menu-item'><a href='#tab-extras'>EXTRAS</a></li>
                            <li class='car-menu-item'><a href='#tab-fotos'>FOTOS</a></li>
                            <li class='car-menu-item'><a href='#tab-partilhar'>PARTILHAR</a></li>
                            <li class='car-menu-item'><a href='#tab-licitar'>LICITAR</a></li>
                        </ul>
                    </div>
                    <div class='vehicle-image-box'>
                        <div id='tab-caracteristicas'></div>
                        <div id='tab-exterior'></div>
                        (... all the other tabs ...)
                    </div>
                </div>
                (... other content ...)
            </div>
        <?php endforeach; ?>
<?php endif; ?>

Answer 1

我認為您的函數調用順序有問題。

首先您調用： $('#slider-id').liquidSlider(); 。 調用此方法時，它將某些div轉換為另一個元素。 其次，您調用$("#tabs").tabs(); 。 這次，您可能無法轉換ui標簽。 也許您應該更改這兩個功能的順序。

編輯：滾動問題。

您還在使用jquery localscroll 。 您像$.localScroll({duration:800});那樣使用它$.localScroll({duration:800}); 。 這會將您的所有鏈接（例如<a href="#the_id">your_text</a>為滾動按鈕。 要解決此問題，請定義一個目標，例如；

$('.menu-item').localScroll();

這只會滾動標題上的鏈接。

如何在頁面中同時包含jQuery UI選項卡和LiquidSlider庫？

問題描述

1 個解決方案

解決方案1
2 已采納 2014-01-17 20:44:55

如何在頁面中同時包含jQuery UI選項卡和LiquidSlider庫？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-01-17 20:44:55

解決方案1
2 已采納 2014-01-17 20:44:55