Question

我最近发布了一些基本代码，用于根据推送的菜单项使网页更改其内容。这是代码。

HTML：

<!DOCTYPE html>
<html>
<head>
 <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script type='text/javascript' src='script.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>

<body>
    <div class="menu" style="text-align:center;">
    <div class="tab" id="tab" style="display:inline-block;"><a href="#">Home</a></div>
    <div class="tab" id="tab" style="display:inline-block;"><a href="#">Page 1</a></div>
    <div class="tab" id="tab" style="display:inline-block;"><a href="#">Page 2</a></div>
    <div class="tab" id="tab" style="display:inline-block;"><a href="#">Page 3</a></div>
    </div>
    <div style="text-align:center">Selection options from menu above</div>

    <div id="main" class="main">
    <div id="content" class="content">
        <h1>Home</h1>
        <p>Home Page Text</p>
    </div>
    <div id="content" class="content">
        <h1>Page 1</h1>
        <p>Page 1 Text</p>
    </div>
    <div id="content" class="content">
        <h1>Page 2</h1>        
        <p>Page 2 Text</p>
    </div>
    <div id="content" class="content">        
        <h1>Page 3</h1>
        <p>Page 3 Text</p>
    </div>                 
    </div>
</body>
</html>

jQuery脚本

$(document).ready(function(){
$('#tab a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.main #content').eq(tmp_div).show();
  });
function hideContentDivs(){
    $('.main #content').each(function(){
    $(this).hide();});
}
hideContentDivs();
});

我遇到的问题是不是默认内容，所以在按下链接之前没有内容出现，我更喜欢“主页”文本作为显示的默认内容。谁能告诉我怎么做？我基本上试图让一个网站出现在一个网页上，所以如果有人有任何更好的想法如何实现这一点，请告诉我，但我必须能够在可变内容中使用div，因为我需要显示和定位图片。感谢

Answer 1

快速而肮脏的方法是触发对docReady的点击（我知道有一种比这更好的方式）：

 $(document).ready(function(){
 $('#tab a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.main #content').eq(tmp_div).show();
  });

 function hideContentDivs(){
    $('.main #content').each(function(){
    $(this).hide();});
 }

hideContentDivs();
$("#tab a").first().click();
});

Answer 2

将0序列作为加载时显示的默认内容。

<强> http://jsfiddle.net/QYNC4/1/

$(document).ready(function(){

$('#tab a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.main #content').eq(tmp_div).show();
  });
function hideContentDivs(){
    $('.main #content').each(function(){
    $(this).hide();});
}
hideContentDivs();
    $('.main #content').eq(0).show();
});

jQuery菜单内容更改器默认内容

2 个答案: