0

クラスのクリックでページのコンテンツをソートする簡単なjqueryスクリプトを作成しました...この例では、すべての製品、ウィンドウ、またはマッキントッシュです。スクリプトは、ウィンドウがスクロールする href で # を使用しているため、EXCEPT のように機能します... ユーザーがリンクの 1 つをクリックしたときにウィンドウがスクロールして正確な場所にとどまるのを止める方法はありますか?

また、私はスクリプトを非常に迅速にまとめました - 誰かが最適化を提供したい場合は、先に進んでください...

基本的な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';
}
});
});
4

4 に答える 4

1

javascript:void(0)href として使用してみてください:

<a href="javascript:void(0)"></a>
于 2012-10-17T23:10:59.570 に答える
1

質問に答えるには: イベントが発生したとき (リンクをクリック)、デフォルトの動作を回避して通常どおり続行する必要があります。各関数のイベントで処理し、event.preventDefault() を呼び出す必要があることを意味します。この方法では、ハッシュタグは追加されません。

関数の 1 つが次のようになります。

$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 タグを取り除き、好きなものを使用して、ボタンなどのクリックトリガーを追加できます。

  <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);
    }
});
于 2012-04-02T15:10:00.480 に答える
0

If you use a tags like

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

it forces the browser to refresh, set the elements to divs and if you need the a href look set css to

cursor: pointer;
于 2012-03-24T00:20:41.517 に答える
0

How are you?

New answer (some optimization included):

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

Original answer:

The way to prevent this is to return false in the click event, this way, the default behaviour won't execute! So:

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

I believe this should work!

Cheers!

于 2012-03-24T00:22:04.290 に答える