个人中心
gpt4 book ai didi

javascript - 在javascript中向上/向下滚动

转载 作者：行者123 更新时间：2023-11-29 15:05:06 24 4
gpt4 key购买 nike

请帮助我完成这个上/下侧边栏菜单。

我制作了一个视频剪辑来演示。

http://www.youtube.com/watch?v=Eegqh1w3eJQ

这是html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mode 1</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>

<body>
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>
<div class="side-nav">

<a href="#" onclick="show('n1')" id="english">57.102 Introductory Spanish</a><br />
<div id="n1" style="display:none">
<a href="#" onclick="show('n2')" id="green">Section 1:Introduction to Spanish Culture</a><br />
<div id="n2" style="display:none">
<a href="#" id="dark_red">Topic 1:Getting started</a><br />
<a href="#" id="dark_red">Topic 2:Introduction to Grammar</a><br /><br /><br />

</div>

<a href="#" onclick="show('n3')" id="green">Section 2:Getting started with reading and  writing</a><br />
<div id="n3" style="display:none">
<a href="#" onclick="show('nn3')" id="dark_red">Topic 1:Reading Spanish</a><br />
<div id="nn3" style="display:none">
<a href="mode 1.html" onclick="show('nn4')" id="light_blue">Mode 1:Spanish Components</a>
<div id="nn4" style="display:none">
<a href="reading_spanish.html" id="red">Spanish Reading</a>
</div>
</div><br />
<a href="#" id="dark_red">Topic 2:Writing in Spanish</a><br />
</div>
</div><br />

<a href="#" onclick="show('m1')" id="english">Topic SuperMode</a><br />
<div id="m1" style="display:none">
<a href="#" id="green">Study Guide</a><br />
<a href="#" onclick="show('m2')" id="green">Key Words</a><br />
<div id="m2" style="display:none">
<a href="#" id="dark_red">Pragmatics</a><br />
<a href="#" id="dark_red">Manana</a><br />
<a href="#" id="dark_red">Tiempo</a><br />
<a href="#" id="dark_red">Cara</a><br />
<a href="#" id="dark_red">Triste</a><br />
</div>
<a href="#" id="green">Learning Support</a><br />
<a href="#" id="green">Help</a><br />
<a href="#" id="green">Chat</a><br />
<a href="#" id="green">Email</a><br />
<a href="#" id="green">Notes</a><br />
</div><br />

<a href="#" onclick="show('p1')" id="english">Pre-defined modes</a><br />
<div id="p1" style="display:none">
<a href="#" id="green">Culture aspects</a><br />
<a href="#" id="green">Reading practice</a><br />
<a href="#" id="green">Writing practice</a><br />
<a href="#" id="green">Listening and speaking</a><br />
</div>

</div>


<div id="slection">
57.102 Introductory Spanish > Section 1 > Topic 1 > Mode 1
</div>

<div id="content">
<p id="list-component">List of Available Components </p>
<!--<div id="check-box">
<input type="checkbox" value="checkbox1" />
<label id="label">Reading</label>
<label id="label2">15-10-2010</label>
<label id="label">10:52</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox2" />
<label id="label">Listening</label>
<label id="label2">14-10-2010</label>
<label id="label">8:02</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox3" />
<label id="label">Writing</label>
<label id="label2">10-10-2010</label>
<label id="label">7:35</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox4" />
<label id="label">Grammar</label>
<label id="label2">01-10-2010</label>
<label id="label">4:20</label>
<label id="label2">Kemp</label><br />
</div>-->


<table id="tabl">
<tr>
<td><input type="checkbox" value="checkbox1" /></td>
<td>Reading</td>
<td>15-10-2010</td>
<td>10:52</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox2" /></td>
<td>Listening</td>
<td>14-10-2010</td>
<td>08:02</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox3" /></td>
<td>Writing</td>
<td>10-10-2010</td>
<td>07:35</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox4" /></td>
<td>Grammar</td>
<td>01-10-2010</td>
<td>04:20</td>
<td>Kemp</td>
</tr>
</table><br />

<input type="button" name="edit_button" id="save_but" value="Edit" />
<input type="button" name="delete_button" id="cancel_but" value="Delete" />
<input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" />
<input type="button" name="back" id="preview-but" value="Back" />


</div>


</div>

</body>
</html>

这是javascript

function show(id)
{
    object=document.getElementById(id);
    if(object.style.display=="none")
    {
        object.style.display="";
        }
        else
        {
        object.style.display="none";
        }
    }

这是CSS

@charset "utf-8";
/* CSS Document */
html,body{
    padding:0;
    margin:0;
    background-color:#E8E8E8;
}
.Body{
    background-color:#FFF;
    width:1050px;
    height:900px;
    margin:auto;
    padding:0;
    position:relative;
}
.header{
    background-color:#FFF;
    width:1048px;
    height:140px;
    float:right;
    border:1px #F00 dotted;
    position:relative;
}
.header #head{
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:46px;
}
.header #select-system{
    position:absolute;
    left:20px;
    bottom:-18px;
    font-family:Verdana, Geneva, sans-serif;
    text-decoration:underline;
}
.side-nav{
    background-color:#FFF;
    width:250px;
    height:757px;
    position:absolute;
    left:auto;
    bottom:0px;
    border:1px dotted #F00;
}
.side-nav #english{
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    padding:5px;
    color:#06F;
}
.side-nav #blue{
    color:#03F;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
}
.side-nav #green{
    color:#6F0;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:15px;
}
.side-nav #dark_red{
    color:#900;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:30px;
}
.side-nav #light_blue{
    color:#0CF;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:45px;
}
.side-nav #red{
    color:#F00;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:60px;
}
.Body #content{
    position:absolute;
    left:260px;
    top:180px;
    width:780px;
    height:700px;
    border:1px solid #F00;
}
.Body #content1{
    position:absolute;
    left:260px;
    top:150px;
    width:780px;
    height:740px;
    border:1px solid #F00;
}
.Body #txt{
    margin-left:20px;
}
.Body #slection{
    position:absolute;
    left:260px;
    top:150px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#F00;
    font-weight:bold;
}
.Body #boxes{
    border:2px solid #000;
    margin-left:10px;
    margin-top:10px;
    height:25px;
}
.Body #text{
    font-weight:bold;
    font-size:20px;
    margin-left:20px;
    margin-top:10px;
}
.Body #cont_box{
    width:730px;
    height:180px;
    border:2px solid #000;
    margin-left:20px;
    font-size:20px;
    color:#00F;
    padding:5px;
}
.Body #cont_box1{
    width:730px;
    height:280px;
    border:2px solid #F60;
    margin-left:13px;
    font-size:20px;
    color:#06F;
    padding:10px;
}
.Body #cont_box2{
    width:645px;
    height:350px;
    border:2px solid #F60;
    margin-left:60px;
    font-size:20px;
    color:#06F;
}
.Body #browse_box{
    border:2px solid #000;
    margin-left:150px;
    margin-bottom:10px;
    height:25px;
    width:400px;
}
.Body #button{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:10px;
}
.Body #button:hover{
    background-color:#09F;
}
.Body #button_more{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:567px;
}
.Body #save_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:150px;
}
.Body #cancel_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:20px;
}
.Body #preview-but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:100px;
}
.Body #preview-but:hover{
    color:#009;
}
.Body #checkbox{
    margin-left:150px;
    height:20px;
}
.Body #dropdownbox{
    width:180px;
    height:30px;
    position:absolute;
    left:280px;
    top:10px;
}
.Body #b1{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    color:#F00;
}
.Body #icons{
    width:130px;
    height:140px;
    margin-right:10px;
    margin-left:60px;
    margin-top:50px;
    float:left;
}
.Body #text_icons{
    width:190px;
    height:15px;
    float:left;
    font-size:14px;
    text-decoration:none;
    color:#06F;
    margin-left:20px;
    margin-right:5px;
}
.Body #extra-materials{
    font-size:18px;
    text-decoration:none;
    margin-left:60px;
    color:#06F;
}
.Body #extra-materials:hover{
    text-decoration:underline;
}
.Body #list-component{
    margin-left:40px;
    font-size:18px;
    font-weight:bold;
}
.Body #check-box{
    margin-left:150px;
}
.Body #label{
    margin-left:30px;
}
.Body #label2{
    margin-left:80px;
}
.Body #tabl{
    border:hidden;
    width:500px;
    height:10px;
    margin-left:150px;
    margin-top:50px;
}

请帮忙!!!

提前致谢!

最佳答案

在我看来，您的问题在于您的“西类牙语组件”链接会将您转到不同的 .html 页面。当新页面加载时，页面左侧的菜单也会重新加载到其原始状态(所有内容都隐藏起来，或者如您所说的“卷起”)。所以，我能看到的两个解决方案是:

(1) 不要让页面重新加载。

(2) 保存菜单的状态，并将该状态发送到新页面(模式 1.html)，因此当新页面加载时，您可以适本地加载菜单。

为了实现第一个解决方案，我将使用 AJAX 从模式 1.html 动态获取数据并将其显示在页面上，而无需重新加载页面。如果您不熟悉 AJAX，w3schools.com 有一个很好的教程 here .

要实现第二种解决方案，您需要一种方法来保存状态，然后将其发送到下一页。这可能需要一些服务器端脚本，即使那样也可能无法像第一个解决方案那样工作，所以我建议坚持使用 AJAX 解决方案。

关于javascript - 在javascript中向上/向下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3950555/

24 4 0
文章推荐： javascript - .ready() 在 window.beforeunload 之后触发
文章推荐： mysql - 增加 phpmyadmin 中的数据类型
文章推荐： mysql - MySQL SELECT 语句、多个表的帮助
文章推荐： javascript - 如何运行 Google 的 prettify 以生成静态 HTML(w/CSS)输出？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com