1

私はウェブサイトで働いています。このサイトには複数のタブがあります。JQuery Cycle プラグインを使用して、それに応じてタブを表示したいと考えています。各タブは、使用可能な領域を占有する必要があります。これを行うために、次のものを作成しました。

<!DOCTYPE html>

<html style="height: 100%; margin: 0; padding: 0; color: #FFF;">
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>

  <style type="text/css">                
    #content { height: 100%; overflow: hidden; background: white; }
    #header { float: left; width: 100%; background-color:silver; padding:8px 4px;}
    #tabItems { height:100%; }

    .tabItem { padding:15px; border:1px solid #ccc; background-color:blue; top:0; left:0; }
  </style>

  <script src="/Scripts/modernizr-2.5.3.js"></script>
  <script src="/Scripts/jquery-1.7.1.js"></script>
  <script src="/Scripts/jquery.cycle.all.js"></script>
</head>

<body style="height: 100%; margin: 0; padding: 0; color: #FFF;">

<div id="content">
    <div id="header">
        <a href="#" onclick="showTab(0);">Tab 1</a> | 
        <a href="#" onclick="showTab(1);">Tab 2</a> | 
    </div>

    <div id="tabItems">
        <div id="tabItem1" class="tabItem">
            <h2>Tab Content Number 1</h2>
        </div>

        <div id="tabItem2" class="tabItem">
            <h2>Tab Content Number 2</h2>
        </div>
    </div>
</div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabItems').cycle({
                fx: 'scrollDown',
                next: '#next',
                prev: '#prev',
                timeout: 0
            });
        });

        function showTab(tn) {
            $('#tabItems').cycle(tn);
            return false;
        }
    </script>
</body>
</html>

を削除すると、このコードは正常に機能し#tabItems { height:100%; }ます。そのスタイル定義があると、タブ間を切り替えることができないようです。ただし、私が知る限り、各タブが残りの不動産を埋めるためには、そのスタイル定義が必要です。これを修正する方法を知っている人はいますか？

ありがとうございました！

4

1 に答える 1

0

私はこれをチェックしていました-コードは実際に正常に動作します（少なくともFF / IEでは）タブは循環します。私のコードとの唯一の違いは、https://github.com/downloads/malsupから最新のサイクルJSを使用したことです/cycle/jquery.cycle.all.latest.js

これが動作していることを確認できなかった特定のブラウザはありましたか?

于 2012-10-12T17:25:22.190 に答える