Question

这是我的HTML代码：

<!-- Unordered list - navigation -->
<ul id="linkwrapper">
   <li><a id="link1" href="#">link1</a></li>
   <li><a id="link2" href="#">link2</a></li>
   <li><a id="link3" href="#">link3</a></li>
</ul>

<!-- Hidden Elements-->
<div id="infocontent">
   <div id="link1content">Information about 1.</div>
   <div id="link2content">Information about 2.</div>
   <div id="link3content">Information about 3.</div>
</div>

JQuery：

$(document).ready(function(){

var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs

$('#linkwrapper a').click(function(){
    var $contentDiv = $("#" + this.id + "content");

    if($contentDiv.is(":visible")) {
        $contentDiv.hide(); // Hide Div
    } else {            
        $allContentDivs.hide(); // Hide All Divs
        $contentDiv.show(); // Show Div
    }

    return false;        
  });
});

在页面中添加要加载的代码时。我想显示第一个链接已经点击加载脚本。它意味着＆＃34;关于1的信息。＆＃34;在页面加载中可见。我怎么能这样做。

此处示例 JS Fiddle

Answer 1

更新了您的JSfiddle。检查一下。你也可以在没有JQuery的情况下做到这一点。

$(document).ready(function(){

var $allContentDivs = $('#infocontent div') // Hide All Content Divs

$('#linkwrapper li a').click(function(){
    var $contentDiv = $("#" + this.id + "content");

    if($contentDiv.is(":visible")) {
        $contentDiv.hide(); // Hide Div
    } else {            
        $allContentDivs.hide(); // Hide All Divs
        $contentDiv.show(); // Show Div
    }

    return false;        
  });
});

你的CSS

.hide{
   display:none;
}
 .show{
  display:inline
}

您的HTML：

 <!-- Unordered list - navigation -->

 <ul id="linkwrapper">
    <li><a id="link1" class="show" href="#">link1</a></li>
    <li><a id="link2"  href="#">link2</a></li>
    <li><a id="link3"  href="#">link3</a></li>
</ul>

 <!-- Hidden Elements-->
 <div id="infocontent">
   <div id="link1content" class="show">Information about 1.</div>
   <div id="link2content" class="hide">Information about 2.</div>
   <div id="link3content" class="hide">Information about 3.</div>
</div>

Answer 2

您可以通过更新选择器来实现它

   var $allContentDivs = $('#infocontent div:not(:first-child)').hide();

再次启动点击事件中的$ allContentDivs

$allContentDivs = $('#infocontent div');

Answer 3

尝试此操作：隐藏所有潜水，但首先使用以下代码

$('#infocontent div:not(:first)').hide();//hide all but first
var $allContentDivs = $('#infocontent div');//get all divs

JSfiddle Demo

Answer 4

只需添加.not（'：first'），如：

var $allContentDivs = $('#infocontent div').not(':first').hide();

Answer 5

var $allContentDivs = $('#infocontent div').hide();

$( "#infocontent div" ).first().show();

Answer 6

在隐藏所有内容后显示第一个div怎么样？

像这样：

$('#infocontent div').first().show();

Answer 7

DEMO

$(document).ready(function(){

    var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs

    $('#linkwrapper a').click(function(){
        var $contentDiv = $("#" + this.id + "content");

        if($contentDiv.is(":visible")) {
            $contentDiv.hide(); // Hide Div
        } else {            
            $allContentDivs.hide(); // Hide All Divs
            $contentDiv.show(); // Show Div
        }

        return false;        
    });

    $('#linkwrapper a').eq(0).click();//manually click the first anchor using .eq()
});

隐藏所有内容并手动点击第一个链接，以便显示

jQuery - 在页面加载时将第一个div显示为默认值

7 个答案: