需要帮助从网站修改javascript吗

我下载了一个html5模板，并尝试对其进行定制，但我对此束手无策。 我想要的网站非常简单。您可以在此处看到演示：

正如您在单击菜单时所看到的，右侧出现了幻灯片内容。 所以有两件事我希望能得到建议：

1.）我想修改此内容的宽度和高度，但不知道如何修改

以下是我认为应该对此负责的javascript：

$(window).load(function() { 
var act='';

$('#content > ul > li').css({position:'absolute', display:'none'});
$('#content > ul > li').find('.box1').css({height:'0'})

$('#menu > li > a span').css({opacity:'0'})

$('#menu > li > a').hover(function(){
    $(this).find(' > span').stop().animate({opacity:'1'},600);                         
}, function(){
    if (!$(this).hasClass('active')) {
        $(this).find(' > span').stop().animate({opacity:'0'},600);                         
    }
})

$('#menu > li').each(function(num){
    $(this).data({num:num})
})
if (location.hash.slice(0,3)=='#!/') {
    page=location.hash.slice(3);
    open_page('#'+page);
}
if ((location.hash=='#')||(location.hash=='')) {
    open_page('');
}
$('#menu a').click(function(){
    $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
    Cufon.replace('#menu a', { fontFamily: 'Questrial', hover:true });
    $(this).addClass('active').find(' > span').stop().animate({opacity:'1'},600);   
})
$('a').click(function(){
    if ($(this).attr('href').slice(0,3)=='#!/') {
        page=$(this).attr('href').slice(3); 
        open_page('#'+page);
        return false;
    }
    if ($(this).attr('data-type')=='close') {
        close_page()    
    }
})
function open_page(page){
    location.hash='#!/'+page.slice(1);
    if (act!='') {
        $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
            $(act).css({display:'none'});
            $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
                act=page;           
            }); 
        })
    } else {
        $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
            act=page;           
        });     
    }
}
function close_page(page){
    $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
    Cufon.replace('#menu a', { fontFamily: 'Questrial', hover:true });
    location.hash='#';
    $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
        $(act).css({display:'none'});
        act='';
    }); 
    return false;
}

})

2.）我想在内容空间中的幻灯片中打开另一个页面（不是托管在同一台服务器上），类似于jquery弹出窗口，但嵌入到该幻灯片窗口中。目前，那里的所有内容都写在index.html中

我是否应该使用iframe执行此操作？我还没有试过，因为我需要先弄清楚第一步

像这样：

<li id="page_Teachers">
                    <div class="box1">
                        <div class="inner">
                            <a href="#" class="close" data-type="close"><span></span></a>
                            <div class="wrapper">
                                <h2>Our Staff</h2>
                                <div class="wrapper pad_bot2">
                                    <figure class="left marg_right1"><img src="images/page2_img1.jpg" alt=""></figure>
                                    <p class="pad_bot2"><strong>Helen Williams</strong></p>
                                    <p class="pad_bot1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</p>
                                    <p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p>
                                </div>
                                <div class="wrapper pad_bot2">
                                    <figure class="left marg_right1"><img src="images/page2_img2.jpg" alt=""></figure>
                                    <p class="pad_bot2"><strong>Jessy Hamper</strong></p>
                                    <p class="pad_bot1">Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolorreprehenderit in voluptate velit esse cillum dolore.</p>
                                    <p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p>
                                </div>
                                <div class="wrapper pad_bot2">
                                    <figure class="left marg_right1"><img src="images/page2_img3.jpg" alt=""></figure>
                                    <p class="pad_bot2"><strong>Chester Hamper</strong></p>
                                    <p class="pad_bot1">Cupidatat non proident sunt culpa officia deserunt mollit anim idst laborum. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
                                    <p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

我们的员工
海伦·威廉姆斯

知识产权是一种权利，是一种精英，在劳动和社会实践中临时参与

杰西·邦德

Ullamco Laboratoris nisi和aliquip ex ea commodo consequat。两人或两人之间的感情是在一个充满激情的世界里


切斯特篮

不轻率的人不应该为自己的行为负责。这是一个很好的例子，我也可以说是一个很好的例子

您还需要考虑CSS。可以从使用css值开始，例如：

.main { width: 980; }
#content { width: xxx }

#page_about, #page_teachers, #page_schedules, #page_prices, #page_more {
    height: 200px;
    width: 300px;
}

---

这些容器的CSS

id

选择器为：

page\u关于、page\u教师、page\u时间表、page\u价格、page\u更多

。如图所示：

<li id="page_About" style="position: absolute; display: block;height: 400px;width: 600px;">
<li id="page_Teachers" style="position: absolute; display: none;">
<li id="page_Schedule" style="position: absolute; display: none;">
...

---

您想动态修改

高度

和

宽度

，还是希望其为固定尺寸？谢谢！是的，在css中找到了它！：）@user2049635是的，对于（2）您可以尝试添加

。