без прокрутки с hashtag/bookmark

Question

Я создал простой скрипт 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'; 
} 
}); 
}); 

Answer 1

Как вы?

Новый ответ (некоторые оптимизации включены):

//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; 
}); 

Оригинальный ответ:

Путь, чтобы предотвратить это, чтобы вернуться ложным в случае щелчка, таким образом, по умолчанию не будет выполнять ! Итак:

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

Я считаю, что это должно сработать!

Cheers!

Answer 2

Если вы используете теги, такие как

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

это заставляет браузер обновить, установить элементы для дивы, и если вам нужен A HREF набор взгляд на CSS

cursor: pointer; 

Answer 3

Чтобы ответить на ваш вопрос: Когда событие запущено (щелкните по ссылке), вам необходимо предотвратить поведение по умолчанию и продолжить, как обычно. Значит, вам нужно обрабатывать событие в каждой функции и вызывать 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, чтобы показать/скрыть элементы, которые вы можете избавиться от а-теги и использовать все, что вам нравится, и добавить к нему клик-триггер, например Кнопки

<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); 
    } 
}); 

Answer 4

Попробуйте использовать javascript:void(0) как HREF:

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