1

有 2 个选项卡都显示 jQuery 滑块 - flexslider（这是一个移动站点）。在纵向模式下有 2 个图像（所以 2 个 div），在横向模式下有 3 个图像（所以 3 个 div）。它们保存在不同的容器代码中，由 CSS 控制，根据方向显示哪个。问题是第一个选项卡在设备拾取方向时显示正常，但是当您切换到另一个选项卡时，内容不会出现，在普通桌面浏览器中测试它确实会在窗口稍微调整大小时出现。简而言之，代码如下：

HTML:

    <!--tabs-->
    <div id="toggleLeft" class="active toggleBox"><a href="" >New Promotions</a></div>
    <div id="toggleRight" class="toggleBox"><a href="">Ending soon</a></div>

    <!--containers-->

    <div id="toggleBoxLeft">
      <div id="mainPortrait" role="main">SLIDER CODE FOR PORTRAIT VIEW</div>
      <div id="mainLandscape" role="main">SLIDER CODE FOR LANDSCAPE VIEW</div>
    </div>

    <div id="toggleBoxRight">
      <div id="mainPortrait2" role="main">SLIDER CODE FOR PORTRAIT VIEW</div>
      <div id="mainLandscape2" role="main">SLIDER CODE FOR LANDSCAPE VIEW</div>
    </div>

    CSS:

    @media all and (orientation:landscape){

    #mainPortrait           {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:hidden;
    }

    #mainLandscape          {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:visible;
    }

    #mainPortrait2          {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:hidden;
    }

    #mainLandscape2             {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:visible;
    }

    }

即使 CSS 声明为，我如何“强制”浏览器加载两个选项卡内容display:none;？

4

0 回答 0