jQuery的 - 显示第一个div中的默认页面加载

这是我的HTML代码：jQuery的 - 显示第一个div中的默认页面加载

<!-- 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;   
    }); 
});

当添加有关代码的页面加载。我想显示第一个链接已经点击作为加载脚本。这意味着“关于1的信息”。在页面加载中可见。我该怎么做。

例这里 JS Fiddle

来源

2016-03-30 sj2012

你可以添加一个手动点击事件的第一个链接chek这个http://jsfiddle.net/sXqnD/568/ – guradio

我会发表我的评论作为答案可以与你？ – guradio

我已添加它作为回答检查 – guradio

您可以通过点击事件里面更新您的选择

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

，并再次启动$ allContentDivs实现它

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

来源

2016-03-30 08:40:49

试试这个：隐藏所有的潜水除了首先使用以下代码

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

JSfiddle Demo

来源

2016-03-30 08:41:16

只需添加。不是（ '：第一'），如：

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

来源

2016-03-30 08:41:31

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

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

来源

2016-03-30 08:43:46 Batikan

但我想隐藏第一个链接，当点击第二或第三个链接。有任何想法吗？ – sj2012

是否这样？ http://jsfiddle.net/sXqnD/578/ – Batikan

你怎么样显示所有隐藏后的第一个div？

像这样：

来源

2016-03-30 08:43:50

但我想隐藏第一个链接点击第二或第三个链接。任何想法？ – sj2012

这就是发生了什么。 [JSFiddle]（http：// jsfiddle。net/sXqnD/576 /） –

当我点击相同的链接两次，这是文本消失..我该如何解决它？ – sj2012

更新您的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>

来源

2016-03-30 08:48:14

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() 
});

隐藏的一切，都在第一链路上的手动点击，这样它会显示

来源

2016-03-30 09:12:09 guradio

jQuery的 - 显示第一个div中的默认页面加载

回答

相关问题