Question

我正在寻找一些代码来根据菜单中选择的项目显示/隐藏div。我找到了这个代码，但只能从开始隐藏所有div。有人可以帮忙修改它以默认显示第一个选项吗？

这是我找到的小提琴http://jsfiddle.net/dangoodspeed/M3ZhV/

我试图切换视图，但它不起作用:)

var curPage="";
$("#menu a").click(function() {
    if (curPage.length) { 
        $("#"+curPage).toggle();
    }
    curPage=$(this).data("page");
    $("#"+curPage).toggle();
});

由于

Answer 1

如果您希望默认显示第一个选项，请将其添加到顶部（curPage所在的位置）

var curPage="";

if(!curPage){
    $('#page1').show()
  curPage = "page1"
}

Answer 2

对您当前代码的略微修改：

$(function() {
$('#page1').show();
var curPage="page1";
  $("#menu a").click(function() {
     if (curPage.length) { 
         $("#"+curPage).hide();
     }
     curPage=$(this).data("page");
     $("#"+curPage).show();
  });
});

FIDDLE

Answer 3

使用此

$(function() {

$("a[data-page^='page'").click(function() {
$("div[id^='page']").hide();
	var page=$(this).attr('data-page');
	$("div[id='"+page+"']").show();
});
});

    .content { display:none;}
    .content:nth-child(1)
    {
      display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <div class="nav">
        <ul id="menu">
            <li id="link1"><a href="#" data-page="page1">Topic One</a>
            </li>
            <li id="link2"><a href="#" data-page="page2">Topic Two</a>
            </li>
            <li id="link3"><a href="#" data-page="page3">Topic Three</a>
            </li>
        </ul>
    </div>
    <div class="main">
        <div id="page1" class="content">
             <h1>Show Page1</h1>

        </div>
        <div id="page2" class="content">
             <h1>Show Page2</h1>

        </div>
        <div id="page3" class="content">
             <h1>Show Page3</h1>
        </div>
    </div>

显示Div的隐藏内容，默认情况下首先显示

3 个答案: