Fatal编程技术网
  • javascript/
  • 如何使用javascript隐藏并让div重新出现

如何使用javascript隐藏并让div重新出现

javascript jquery html css

如何使用javascript隐藏并让div重新出现,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图使网页有一个div在中心正在改变，而不是去不同的网页 最后，我想让新的div在单击箭头时从右或左向中间流动。但首先，我想让div在单击箭头时出现和消失，但不幸的是，这不起作用 这是我的javascript： <script> function changeToHome() { document.getElementById("mainmain").style.display="block"; document.getElementById("mainmain2"

我试图使网页有一个div在中心正在改变，而不是去不同的网页

最后，我想让新的div在单击箭头时从右或左向中间流动。但首先，我想让div在单击箭头时出现和消失，但不幸的是，这不起作用

这是我的javascript：

<script>
function changeToHome() {
    document.getElementById("mainmain").style.display="block";
    document.getElementById("mainmain2").style.display="none";
    document.getElementById("mainmain3").style.display="none";
    document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {    
    document.getElementById("mainmain").style.display="none";
    document.getElementById("mainmain2").style.display="block";
    document.getElementById("mainmain3").style.display="none";
    document.getElementById("mainmain4").style.display="none";
}    
function changeToJob() {    
    document.getElementById("mainmain").style.display="none";
    document.getElementById("mainmain2").style.display="none";
    document.getElementById("mainmain3").style.display="block";
    document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {    
    document.getElementById("mainmain").style.display="none";
    document.getElementById("mainmain2").style.display="none";
    document.getElementById("mainmain3").style.display="none";
    document.getElementById("mainmain4").style.display="block";
}    

function changePageRight() {
    var displayValue5 = document.getElementById('mainmain').style.display;
    var displayValue5 = document.getElementById('mainmain2').style.display;
    var displayValue6 = document.getElementById('mainmain3').style.display;
    var displayValue7 = document.getElementById('mainmain4').style.display;

    if (document.getElementById('mainmain').style.display == "block") {
        document.getElementById("mainmain").style.display="none";
        document.getElementById("mainmain2").style.display="block";
    }
    else if (document.getElementById('mainmain2').style.display == "block") { 
        document.getElementById("mainmain2").style.display="none";
        document.getElementById("mainmain3").style.display="block";
    }
    else if (document.getElementById('mainmain3').style.display == "block") {
        document.getElementById("mainmain3").style.display="none";
        document.getElementById("mainmain4").style.display="block";
    }
    else if (displayValue8 == block) {}
}
function changePageLeft() {
    var displayValue = document.getElementById('mainmain').style.display;
    var displayValue2 = document.getElementById('mainmain2').style.display;
    var displayValue3 = document.getElementById('mainmain3').style.display;
    var displayValue4 = document.getElementById('mainmain4').style.display;

    if (displayValue == "block") { }
    else if (displayValue2 == "block") { 
        document.getElementById("mainmain").style.display="block";
        document.getElementById("mainmain2").style.display="none";
    }
    else if (displayValue3 == "block") {
        document.getElementById("mainmain2").style.display="block";
        document.getElementById("mainmain3").style.display="none";
    }
    else if (displayValue4 === "block") {
        document.getElementById("mainmain3").style.display="block";
        document.getElementById("mainmain4").style.display="none";
    }
}
</script>
以及显示为无的所有其他div这样我就可以将它改为block，将原来的块改为none。 出于某种原因，当我点击菜单上的一个按钮，激活changeToX（）函数后，箭头效果很好。但在此之前，当你第一次访问网站时，它不会

有人能解释一下我做错了什么吗？

您不能告诉浏览器加载时应该显示哪个
div
s。您可以为此使用事件：

<body onload="changeToHome()">
还有一个提示：您可能不想使用。

jQuery如下所示：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<a href="#" class="toggle-container" data-container="#mainmain">toggle!</a>
<div id="mainmain">test text</div>

<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() { 

    $('.toggle-container').on('click', function(e) {
        e.preventDefault(); // this prevents the real href to '#'

        // .toggle() is like "on / off" switch for hiding and showing a container
        $($(this).data('container')).toggle();
    });
});
</script>


测试文本
//您需要这样做，仅在加载所有html（dom）时应用javascript：
$（文档）.ready（函数（）{
$（'.toggle container'）。打开（'click'，函数（e）{
e、 preventDefault（）；//这将阻止对“#”的实际href
//.toggle（）类似于用于隐藏和显示容器的“开/关”开关
$（$（this.data（'container'））.toggle（）；
});
});
此函数可以重用，因为它基于类而不是id

检查这个JSFIDLE:

也许这是有用的。我试着做一个页面控件式的行为。您可以选择任何容器div并将类为“page”的元素放入其中。JavaScript代码将允许您使用按钮导航这些内容

您可以通过JavaScript添加按钮，使其更加美观。然后，基本上就是一个页面列表，通常显示为常规div，但当脚本启动时，它会将它们更改为页面控件

您可以为任何父元素调用它，从这个意义上讲，它的行为有点像jQuery插件。不过，这都是本地JavaScript。我希望代码不要太多。正如你所说，我认为首先学习JavaScript是件好事。它本身就非常强大，而且越来越强大。jQuery添加了许多方便的函数，并在浏览器不支持某些功能或实现不同时提供了回退。但是对于许多任务来说，纯JavaScript都可以很好地完成，而且知道如何使用它肯定不会有什么坏处

按底部的“运行此代码段”按钮以查看它的运行情况。 
功能页（元素）
{
//一些初始化
var-activePage；
//查找此元素中的所有页面。
var pages=document.querySelectorAll（'.page'）；
var maxPage=pages.length-1；
//用于切换活动页面的函数。
var setPage=函数（索引）
{
activePage=索引；

对于（p=0；p为什么不使用jquery？我以前从未使用过jquery。我认为在使用jquery之前最好先更好地理解JavaCScript。除非你建议我早点研究jquery。我也很乐意用jquery而不是javascript来回答，因为我在这个网站上看到了很多关于jquery的答案在javascript中，作者没有特别要求使用jquery。jquery既快速又简单，它可以极大地减少您的编码以获得最大的效率。CSS是：
display:none
或
visibility:hidden
@LcSalazar我认为，他的代码会增长，他需要jquery在未来的其他地方为您提供答案，addin我知道我不应该做内联css和javascript，我有不同的文件，但有时当我懒惰并且尝试新东西时，我倾向于内联添加。我想这是个坏习惯。很高兴我能帮上忙。这绝对是个坏习惯-最好创建类（比如displaynone或displayblock）并使用普通JavaScript（
element.className+=“displaynone”
）或jQuery（
$（element.addClass（“displayne”）
）将它们分配给容器虽然我同意jQuery很简单，但它的优势并没有那么大。我冒昧地修改了您的示例，使用纯Javascript。额外的代码量是可以忽略的，它至少在最新版本的Chrome和IE中可以工作。这还节省了额外的请求和38KB的下载（缩小和压缩！）。

<body onload="changeToHome()">



<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<a href="#" class="toggle-container" data-container="#mainmain">toggle!</a>
<div id="mainmain">test text</div>

<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() { 

    $('.toggle-container').on('click', function(e) {
        e.preventDefault(); // this prevents the real href to '#'

        // .toggle() is like "on / off" switch for hiding and showing a container
        $($(this).data('container')).toggle();
    });
});
</script>