Question

我遇到了这个脚本的问题，包括没有使用最新的Firefox＆amp; IE版本！我正在使用此脚本隐藏具有容器类的div并显示id为home的那个。然后根据href =“＃customid显示元素。

虽然我在实时网站上工作，但是在本地运行网页会有问题吗？或者它可能是html标记的问题，它只包含很好关闭的div。

一般来说，这是他们做任何“更好”的方式吗？

JS

$(document).ready(function()
{
// hides all DIVs with the CLASS container
// and displays the one with the ID 'home' only
$(".container").css("display","none");
$("#home").css("display","block");

// makes the navigation work after all containers have bee hidden 
showViaLink($("aside button#navigation a"));

// listens for any navigation keypress activity
$(document).keypress(function(e)
{
    switch(e.which)
    {
        // user presses the "a"
        case 97:    showViaKeypress("#home");
                    break;  

        // user presses the "s" key
        case 115:   showViaKeypress("#about");
                    break;

        // user presses the "d" key
        case 100:   showViaKeypress("#contact");
                    break;

        // user presses the "f" key
        case 102:   showViaKeypress("#awards");
                    break;

        // user presses the "g" key 
        case 103:   showViaKeypress("#links");
       }
       });
       });

// shows a given element and hides all others
function showViaKeypress(element_id)
{
$(".container").css("display","none");
// if multiple keys are pressed rapidly this will hide all but the last pressed key's div
$(".container").hide(1);
$(element_id).slideDown("slow");
}

// shows proper DIV depending on link 'href'
function showViaLink(array)
{
array.each(function(i)
{   
    $(this).click(function()
    {
        var target = $(this).attr("href");
        $(".container").css("display","none");
        $(target).slideDown("slow");
    });
});
}

Answer 1

你可以这样做，这将大大“简化”你的剧本。

Here's a codepen

<强> HTML

<div id="home" data-hotkey="97" class="container">
    <a href="#home">Home</a>
</div>
<div id="about" data-hotkey="115" class="container">
    <a href="#about">About</a>
</div>
<div id="contact" data-hotkey="100" class="container">
    <a href="#contact">contact</a>
</div>
<div id="awards" data-hotkey="102" class="container">
    <a href="#awards">Awards</a>
</div>

<强> CSS

.container {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #bada55;
  transition: height 0.2s;
  text-align: center;
}
.container > a {
  color: white;
  display: inline-block;
  line-height: 100px;
  text-decoration: none;
}
.container.hide {
  display: hidden;
  height: 0px;
}
.container:nth-of-type(2) {
  background: #85da55;
}
.container:nth-of-type(3) {
  background: #55dac5;
}
.container:nth-of-type(4) {
  background: #9055da;
}

<强> jquery的

$(function() {
  // cache containers
  var $containers = $('.container');

  // hide all but home
  $containers.not('#home').addClass('hide');

  $(document).on('keypress', function(e) {
    var hotkey = e.which,
        $keyContainer = $('[data-hotkey='+e.which+']');

    // if not in hotkeys, return
    if (!$keyContainer.length) return;

    $containers.addClass('hide');
    $keyContainer.removeClass('hide');
  });
});

有没有另一种方法来隐藏div并将它们滑起来？

1 个答案:

Here's a codepen