没有标签/书签滚动答案

【问题标题】：no scrolling with hashtag/bookmark没有标签/书签滚动
【发布时间】：2012-03-23 23:01:03
【问题描述】：

我制作了一个简单的 jquery 脚本，用于在单击类时对页面内容进行排序……在本例中，所有产品、窗口或 macintosh。该脚本就像我想要的那样工作，除了因为我在窗口滚动的 href 中使用 # ......无论如何，当用户点击其中一个链接时，是否有阻止窗口滚动并保持准确的位置？

此外，我很快就将脚本组合在一起 - 如果有人想提供一些优化，请继续...

基本的html：

<a class="all" href="#">All Products</a>
<a class="win" href="#">Windows</a>
<a class="mac" href="#">Macintosh</a>

<div class="windows">1 win</div>
<div class="macintosh">2 mac</div>
<div class="windows">3 win</div>
<div class="windows">4 win</div>
<div class="windows">5 win</div>
<div class="macintosh">6 mac</div>
<div class="windows">7 win</div>

脚本：

var $zproducthide = jQuery.noConflict();
$zproducthide(document).ready(function() {

$current = 'all';

$zproducthide(".all").click(function () {
if ($current != 'all'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".windows").fadeIn(1500);
       $zproducthide(".macintosh").fadeIn(1500);
       $current = 'all';
}
});

$zproducthide(".win").click(function () {
if ($current != 'windows'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".windows").fadeIn(1500);
       $current = 'windows';
}
});

$zproducthide(".mac").click(function () {
if ($current != 'macintosh'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".macintosh").fadeIn(1500);
       $current = 'macintosh';
}
});
});

【问题讨论】：

是否有 windows.position 声明或某种形式？您可以尝试使用它，以便窗口保持在顶部。我确实记得单击#-链接时我没有看到我的浏览器窗口（Chrome）移动（除非它链接到书签）。也许隐藏与它有关？尝试使用块元素？

标签： jquery scroll show-hide hashtag

【解决方案1】：

回答您的问题：触发事件时（单击链接），您需要阻止默认行为并照常继续。意味着您需要在每个函数中处理事件并调用 event.preventDefault()。这样就不会添加标签了。

您的一个函数将如下所示：

$zproducthide(".all").click(function (event) {
    event.preventDefault();    // no hashtag please

    if ($current != 'all'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".windows").fadeIn(1500);
       $zproducthide(".macintosh").fadeIn(1500);
       $current = 'all';
    }
});

除此之外，还有一些建议：

1：由于您使用 JS 来显示/隐藏元素，因此您可以摆脱 a-tags 并使用您喜欢的任何内容并为其添加点击触发器，例如按钮

  <button class="all" href="#">All Products</button>
  <button class="windows" href="#">Windows</button>
  <button class="macintosh" href="#">Macintosh</button>

2：添加更多元信息，以便以后为您提供帮助（例如，所有 7 个项目都是某种产品，对吧？）

<div class="prod windows">1 win</div>
<div class="prod macintosh">2 mac</div>

3：统一所有3个按钮的点击触发并使用新类

$("button").click(function(event) {
    event.preventDefault();

    prod = $(this).attr('class');
    if(prod!="all") {
        // mac,win
        $(".prod")
            .hide()                 // hide all elements
            .filter("."+prod)       // filter win/mac
                .fadeIn(1500);      // show those

    } else {
        // all
        $(".prod")
            .hide()
            .fadeIn(1500);
    }
});

【讨论】：

【解决方案2】：

尝试使用javascript:void(0) 作为href：

<a href="javascript:void(0)"></a>

【讨论】：

【解决方案3】：

你好吗？

新答案（包括一些优化）：

//Start with the default class
$current = 'all';

//Setup an object which is configured as { class : 'jQuery selectors' }
//This is neat because you can add more items and only modify this array like this:
//arr = {'lin': '.linux', 'win' : '.windows', 'mac' : '.macintosh' };
arr = {'win' : '.windows', 'mac' : '.macintosh' };

//Get all the object properties in order to make it dynamic (so you don't have to add new classes manually, only in our "arr" object
var sel = '';
$.each(arr,function(k,v){ sel += ',.' + k; });
//at this point aSelector equals to ",.win,.mac";

//create the .all selector
arr.all = sel;

//Equals to $('.all,.win,.mac'
$('.all' + sel,function(){

  $current = $(this).attr('class');

  $(arr['all']).hide(); //Hide all elements
  $(arr[$current]).fadeIn(1500); //Show only the current one (in case it's 'all', all elements will be shown)

  //Prevent default behaviour!
  return false;
});

原答案：

防止这种情况的方法是在点击事件中返回false，这样默认的行为就不会执行了！所以：

//Select all the anchors with the desired classes
$("a.all,a.win,a.mac").click(function(){ return false; });

我相信这应该可行！

干杯！

【讨论】：

【解决方案4】：

如果你使用类似的标签

<a class="all" href="#">All Products</a>
<a class="win" href="#">Windows</a>
<a class="mac" href="#">Macintosh</a>

它强制浏览器刷新，将元素设置为 div，如果您需要将 a href 设置为 css 则

cursor: pointer;

【讨论】：