Question

我有以下几行代码来显示一个页面，该页面加载了多个可以通过单击选项卡显示的页面：

<script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});

</script>

...

<div id="tabBarArea">
    <div id="tabBarContainer">
        <ul class="tabs">
            <li id="home"><a href="#home">Home</a></li> -->
            <li id="readingListTab"><a href="#books">Commander's Reading List</a></li>
            <li id="moviesTab"><a href="#movies">Lecture Series</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <div id="tab_container">
        <div id="home" class="tab_content">
            <div id="homeHeaderGraphic" class="header">
                <img id="homeHeaderGraphicImage" src="images/CommandProfessionalDeveloment%20ResourceGuide%20Header-Title.png">
            </div>
            <div id="homeContent" class="contentArea">
                <script type="text/javascript">
                    $.get("Home.html", function(data){
                        $("#homeContent").empty().append(data);
                     }, "html");
                    resizeContentAreaHeight("home", "homeHeaderGraphic", "homeContent");
                </script>
            </div>
        </div>
        <div id="books" class="tab_content">
            <div id="booksHeaderGraphic" class="header">
                <img id="booksHeaderGraphicImage" src="images/Commander%27sReadingList%20Header.png">
            </div>
            <div id="booksContent" class="contentArea">
                <script type="text/javascript">
                    $.get("CommanderReadingList.html", function(data){
                        $("#booksContent").empty().append(data);
                     }, "html");
                    resizeContentAreaHeight("books", "booksHeaderGraphic", "booksContent");
                </script>
            </div>
        </div>
        <div id="movies" class="tab_content">
            <div id="moviesHeaderGraphic" class="header">
                <img id="moviesHeaderGraphicImage" src="images/LectureSeries%20Logo.png">
            </div>
            <div id="moviesContent" class="contentArea">
                <script type="text/javascript">
                    $.get("ForumsArchives.htm", function(data, status, xhr){
                        $("#moviesContent").empty().append(data);
                     }, "html");
                    resizeContentAreaHeight("movies", "moviesHeaderGraphic", "moviesContent");
                </script>
            </div>
        </div>
    </div>
</div>

我遇到的问题是，当提到阅读列表时，它需要在页面初始化时使用一些变量，即使它是隐藏的。变量看起来应该与它们的值类似：

trueLittleBooksResponsiveOffsetTop: 363 
$('#readingListIntro').offset().top: 263 
$('#readingListIntro').css('margin-top'): 0 
$('#readingListIntro').height(): 100 
littleBooksResponsiveTop: 365 
littleBooksResponsiveHeight: 0 
bookMenuBarHeightToMove: 161 
readingListIntroTop: 263 
readingListIntroHeight: 100

但是当Home标签出现时，它会出现这样的情况。

trueLittleBooksResponsiveOffsetTop: 0
$('#readingListIntro').offset().top: 0
$('#readingListIntro').css('margin-top'): 0px
$('#readingListIntro').height(): 0
littleBooksResponsiveTop: 0
littleBooksResponsiveHeight: 0
bookMenuBarHeightToMove: -204
readingListIntroTop: 0
readingListIntroHeight: 0

据我所知，问题是在页面启动期间第二个选项卡不可见。当我制作书籍标签时，第一个可见，它正确初始化，但当我使用主页作为第一个标签时，它给了我不好的变量。我需要让页面的变量在初始化时不可见。

Answer 1

您可以使用以下CSS中的任何一个来进行计算，以使页面可见并计算内容并将其还原：

position: absolute;
z-index: 1;
top: -200%;

或其他：

display: block;
position: absolute;
z-index: 1;
visibility: hidden;

上述CSS必须在AJAX事件的success函数内设置。

Answer 2

我带走了加载到div中的页面的一些动态，并硬编码了图形书菜单栏的高度，以便图形书菜单栏在整个时间内保持不变。然后不必进行初始计算。我想，只要变量不能改变（太多），计算的需求就会消失。不是最好的，但我在一个有限的环境中，所以用户不需要太多差异。

使用$ .get，需要在隐藏页面

2 个答案: