Question

我已经学会了如何使用javascript显示和隐藏div，但是如何在页面加载时进行第一个div显示而不必单击它？基本上我正在创建一个包含6个不同链接的菜单。我想在页面加载时显示第一个链接div，然后在单击其他链接时隐藏。

 <div class="nav">
    <ul id="menu">
        <li id="1"><a href="#">Topic One</a></li>
        <li id="2"><a href="#">Topic Two</a></li>
        <li id="3"><a href="#">Topic Three</a></li>

    </ul>
</div>
<div class="main">
    <div id="1" class="content">
    <h1>Page 1</h1>
    <p>First section of content.</p>
    </div>
    <div id="2" class="content">
    <h1>Page 2</h1>        
    <p>Second section of content</p>
    </div>
    <div id="3" class="content">        
    <h1>Page 3</h1>
    <p>Third section of content.</p>
    </div>               
  </div>
 </div>

的JavaScript

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('#menu a').click(function(e){
 hideContentDivs();
 var tmp_div = $(this).parent().index();
 $('.main div').eq(tmp_div).show();
 });

function hideContentDivs(){
$('.main div').each(function(){
$(this).hide();});
}
hideContentDivs();
});//]]>  

</script>

Answer 1

正如我在评论中提到的，从一个数字开始的ID是一个坏主意，你有更多的重复ID，更糟糕的是，保持ID唯一。

这里有几种方法，一种是使用CSS来隐藏div，然后使用Jquery来显示它们。另一种是使用jQuery隐藏它们......因为这是你开始的路径，让我们使用它。

但首先让我们修复你的HTML

$('#menu a').click(function(e){
    var target = $(this).attr("href");
    $(".main .content").not(target).hide();
    $(target).show();
    return(false);
 });

//Hide the divs on load
$(".main .content").hide();
//Set an initial target
var initialTarget = "#Section1";

//Overide that target if coming from a bookmark. E.g www.mypage.com#Section2
//Another reson to use meaningful href 
if(location.hash.length > 0) {initialTarget =location.hash; }
$(initialTarget).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
    <ul id="menu">
        <!-- Give your href some actual meaning -->
        <li ><a href="#Section1">Topic One</a></li>
        <li ><a href="#Section2">Topic Two</a></li>
        <li ><a href="#Section3">Topic Three</a></li>

    </ul>
</div>
<div class="main">
    <div id="Section1" class="content">
    <h1>Page 1</h1>
    <p>First section of content.</p>
    </div>
    <div id="Section2" class="content">
    <h1>Page 2</h1>        
    <p>Second section of content</p>
    </div>
    <div id="Section3" class="content">        
    <h1>Page 3</h1>
    <p>Third section of content.</p>
    </div>               
  </div>
 </div>

在点击时显示/隐藏div-如何在页面加载时显示div 1？

1 个答案: