Question

我正在尝试制作一个简单的页面。我只希望一次展示一个师，并使用href＃＆＃39; s在身体中导航。我想我需要根据点击的锚链接显示/隐藏。谢谢。

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <meta charset="utf-8">
</head>
<body>

    <div id="home">
        <a href="#" rel="test">Go To Testing Number</a>
    </div>

    <div id="test">
        <a href="#" rel="home">Home</a>
        <p>Testing Number</p>
        <input type="number" value="0" />
    </div>


</body>
</html>

的JavaScript

$(document).ready(function(){
    $('div').not('#home').hide();   // show home page first
});

// this function needs to change I think, it does not work properly
$('a').on('click', function(){
   var target = $(this).attr('rel');
   $(target).hide();
   $("#"+target).show();
});

Answer 1

//this should work fine 
$('a').on('click', function(){
    var     target = $(this).attr('rel');
    If(target == "home"){
        $("#home" ).hide();
        $("#test").show();
    }else{
        $("#test" ).hide();
        $("#home").show();
    }
});

Answer 2

您正确显示所选的DIV，但隐藏其他DIV的代码错误。为什么你认为$(target)会选择已经显示的DIV？

将不同标签的所有DIV分配到同一个类中，这样您就可以在一次调用中隐藏它们。

<div id="test" class="tab">
    <a href="#" rel="home">Home</a>
    <p>Testing Number</p>
    <input type="number" value="0" />
</div>

然后jQuery将是：

$("a").click(function() {
    var target = $(this).attr("rel");
    $(".tab").hide();
    $("#" + target).show();
});

Answer 3

我在网上进行了数小时的研究后发现了这一点。简单而有力。

$(document).ready(function(){
    $('div').not('#home').hide();   // show home first

    $('a').click(function() {
        var target = $(this).attr('href');
        $('div').not(target).hide();
        $('div').filter(target).show();
    });
});

JSFiddle Solution

jQuery href导航

3 个答案: