Question

我的代码工作正常。我只想让隐藏的div可见。它默认是隐藏的。当我点击链接时显示div。我需要一个帮助来默认显示div。我尝试了一些东西，但我无法找到正确的方法。

    #morelist {
        padding:0;
        margin:0;
        list-style:none;
        padding-right:50px;
        float:left;
        font:15px/18px'Playfair Display', serif;
    }
    .show {
        cursor:pointer;
    }
    .show b {
        font-weight:normal;
    }
    .hidden {
        display:none;
        float:left;
        width:400px;
    }
    .clear {
        clear:both;
    }
    $(document).ready(function () {

        $(".hidden").hide();
        $(".show b").html("Show");

        $(".show").click(function () {
            if (this.className.indexOf('clicked') != -1) {
                $(".hidden").hide();
                $(this).removeClass('clicked')
                $(this).children("b").html("Show");
            } else {
                $(".hidden").hide();
                $(".show").removeClass('clicked');
                $(".show").children("b").html("Show");
                current = $(this).children("b").attr("class");
                $("#" + current).show();
                $(this).addClass('clicked')
                $(this).children("b").html("Hide");
            }
        });

    });
<ul id="morelist">
    <li class="show"><b class="aform">Show</b> a Form</li>
    <li class="show"><b class="apicture">Show</b> a picture with text</li>
</ul>

    <div id="aform" class="hidden">

    <h3>Enter your login password below:</h3>

        <form id="two" action="..." method="post">
            <fieldset id="personal">
                <label for="login">login :</label>
                <input name="login" id="login" type="text" tabindex="1" />
            </fieldset>
            <p class="buttons">
                <input id="button1" type="submit" value="Send" />
                <input id="button2" type="reset" value="Reset" />
            </p>
        </form>
    </div>
    <div id="apicture" class="hidden">
        <img src="more_and_more/image.jpg" title="" alt="pretty woman portrait" />
            <h3>Pretty woman portrait</h3>


    </div>

Demo

Answer 1

如果您不希望隐藏它，请不要将“隐藏”放在相关div的类中。

如果您的目标是一次只显示2个元素中的一个，那么您可以从最初隐藏的那个元素开始拥有隐藏类，然后在两个元素上使用jQuery的toggleClass（“hidden”）：这将从拥有它的那个中移除隐藏（因此，显示它）并将其添加到没有它的那个（因此，隐藏它）。

Answer 2

我认为默认隐藏的div就是这个？

<div id="apicture" class="hidden">

你给了它默认的“隐藏”类。

“。hidden”声明为“display：none;”在你的CSS代码中。

如果您希望在默认情况下显示它，则需要另一个显示值。标准是“显示：内联;”据我所知。

希望这能解决你的问题。

Answer 3

您可以通过多种方式实现这一目标。其中之一是更改元素的css属性，如下所示

.hidden {
    display:BLOCK;
    float:left;
    width:400px;
}

你可以像这样删除它

.hidden {
    float:left;
    width:400px;
}

或者你可以删除你不想隐藏的div类。

<div id="apicture" class="hidden">

将成为

<div id="apicture">

和

<div id="aform" class="hidden">

应该是

<div id="aform">

希望这会有所帮助。

默认显示div

3 个答案: