Question

我正在尝试制作网页，其中中心有一个正在更改的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：

<div id="mainmain4">
    <img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;"     src="Untitled-22.png" />
    <h2> My name </h2>
    <p>Hi,</p>
    <p>Some text</p>
</div>

使用这些css atributes：

#mainmain {
    float: left;
    width: 575px;
    display: block;
    position: relative;
}

所有其他div都有display: none;所以我可以将其更改为阻止和阻止为无阻塞的div。出于某种原因，当我点击菜单中的一个按钮（激活changeToX（）函数）后，箭头效果很好。但在此之前，当你第一次访问网站时，却没有。

有人能解释我的错误吗？

Answer 1

您不会告诉浏览器在加载时应显示div。您可以使用onload事件：

<body onload="changeToHome()">

另外一个提示：您可能不想使用inline JavaScript and CSS。

Answer 2

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>

此功能可以重复使用，因为它基于类而不是id。

检查此JSFiddle：http://jsfiddle.net/r8L6xg15/

Answer 3

也许这有一些用处。我试图做出类似页面控件的行为。您可以选择任何容器div并在其中放置具有“page”类的元素。 JavaScript代码可让您使用按钮进行导航。

通过JavaScript添加按钮可以使它更加华丽。你拥有的基本上是一个页面列表，通常显示为常规div，但是当脚本启动时，它会将它们更改为页面控件。

你可以为任何父元素调用它，从这个意义上说它的行为有点像jQuery插件。不过，它都是原生JavaScript。我希望，而不是太多的代码。就像你说的那样，我认为最初学习JavaScript是件好事。它本身非常强大，而且它变得越来越强大。 jQuery添加了许多便利功能，并在浏览器不支持某些功能或实现不同的情况下提供回退。但是对于许多任务来说，裸JavaScript可以做得很好，而且知道你的方法肯定不会有害。

按下底部的“运行此代码段”按钮，查看其实际效果。

function Pages(element)
{
    // Some initialization
    var activePage;
    // Find all pages within this element.
    var pages = document.querySelectorAll('.page');
    var maxPage = pages.length - 1;
    
    // Function to toggle the active page.
    var setPage = function(index)
    {
        activePage = index;
        for (p = 0; p <= maxPage; p++)
        {
            if (p == activePage)
                pages[p].className = 'page active';
            else
                pages[p].className = 'page inactive';
        }
    }
    
    // Select the first page by default.
    setPage(0);
    
    // Handler for 'previous'
    element.querySelector('.prev').onclick = function()
    {
        if (activePage == 0) 
            return;
        setPage(activePage - 1);
    }
    
    // Handler for 'next'
    element.querySelector('.next').onclick = function()
    {
        if (activePage == maxPage) 
            return;
        setPage(activePage + 1);
    }

    // Add a class to the element itself. This way, you can already change CSS styling 
    // depending on whether this code is loaded or not. So in case of an error, the
    // divs are just all show underneath each other, and the nav buttons are hidden.
    element.className = element.className + ' js';
}

Pages(document.querySelector('.pages'));

.pages .page {
    display: block;
    padding: 40px;
    border: 1px solid blue;
}

.pages .page.inactive {
    display: none;
}

.pages .nav {
    display: none;
}

.pages.js .nav {
    display: inline-block;
}

<div class="pages">
    <button class="nav prev">Last</button>
    <button class="nav next">Next</button>
    
    <div class="page">Page 1 - Introduction and other blah</div>
    <div class="page">Page 2 - Who am I? Who are you? Who is Dr Who?</div>
    <div class="page">Page 3 - Overview of our products
      <ul><li>Foo</li><li>Bar</li><li>Bar Pro</li></ul>
    </div>
    <div class="page">Page 4 - FAQ</div>
    <div class="page">Page 5 - Contact information</div>
</div>

为了使这一点更专业：

通过JavaScript添加导航
在到达第一页/最后一页时禁用按钮
支持按键导航（甚至滑动！）
在页面之间切换时的一些CSS变换（淡入淡出或移动）
更智能地添加和删除类。现在我只设置className，如果有人想自己添加类，那就太糟糕了。 jQuery为此提供了addClass和removeClass，这很有帮助。还有独立的图书馆可以帮助你解决这个问题。
页面的可见指示，可能顶部有标签？

如何使用javascript隐藏并让div再次出现

3 个答案: