Замена Div с Jquery - движения экрана - PullRequest
Новая
       15

Замена Div с Jquery - движения экрана

0 голосов
/ 27 марта 2012

Я хочу изменить свое содержимое div по щелчку ссылки, в настоящее время это работает, используя идентификатор, чтобы показать скрытие div в содержимом.

Тем не менее, экран перемещается в верхнюю часть кликаемого элемента div - я знаю, что это связано с тем, что он связан с перемещением к местоположению идентификатора, существует ли способ, каким бы пользователь ни прокручивал страницу вниз, когда он в состоянии нажать, что экран не сдвинется к вершине div?

HTML 

<li><a href="www.example.com/cakes.php#wedding-tab" onClick="showhide('wedding')" title="Wedding Cakes" class="tabs" id="wedding-tab">Wedding Cakes</a></li>
<li><a href="http://www.example.com/cakes.php#celebration-tab" onClick="showhide('birthday')" title="Birthday Cakes" class="tabs" id="celebration-tab">Birthday Cakes</a></li>
 <li><a href="http://www.example.com/cakes.php#christening-tab" onClick="showhide('christening')"title="Christening Cakes" class="tabs" id="christening-tab">Christening Cakes</a></li>
 <li><a href="http://www.example.com/cakes.php#cupcakes-tab" onClick="showhide('occassion')"title="Occassion Cakes" class="tabs" id="cupcakes-tab">Occasion Cakes</a></li>


<div id="wedding">
content
</div>

<div id="birthday">
content
</div>

<div id="christening">
content
</div>

<div id="occassion">
content
</div>

JS 

$(document).ready(function() {
    var h1 = $("#wedding").height();
    var h2 = $("#birthday").height();
     var h3 = $("#christening").height();
     var h4 = $("#occassion").height();
    $("#wedding,#birthday,#christening,#occassion").height(Math.max(h1, h2, h3, h4));
    $("#birthday").hide();
    $("#christening").hide();
    $("#occassion").hide();
});

$("#wedding-tab").live('click', function() {
    $("#wedding").show();
    $("#birthday").hide();
     $("#christening").hide();
      $("#occassion").hide();
});

$("#celebration-tab").live('click', function() {
    $("#wedding").hide();
    $("#birthday").show();
     $("#christening").hide();
      $("#occassion").hide();
 });

$("#christening-tab").live('click', function() {
     $("#wedding").hide();
     $("#birthday").hide();
     $("#christening").show();
     $("#occassion").hide();
});

$("#cupcakes-tab").live('click', function() {
    $("#wedding").hide();
    $("#birthday").hide();
     $("#christening").hide();
      $("#occassion").show();
});

Ответы [ 4 ]

0 голосов
/ 27 марта 2012

Могу я показать несколько более краткую версию вашей стены сценария: 

$('li > a').click(function(e) {
    e.preventDefault();
    var id = this.firstChild.nodeValue.toLowerCase().split(/ /)[0];
    $('#' + id).toggle().siblings().not('ul').hide();
});​

JS Fiddle demo .

Предполагается, что вы хотите показывать div с соответствующим id, когда нажимаете на ссылку (при нажатии на ссылку «wedding-tab» отобразится div «wedding», а остальные будут скрыты?

Он запрещает действие по умолчанию для нажатой a, поэтому окно не должно перемещаться после нажатия на ссылку.

Также я исправил опечатку в вашей разметке, div id был 'случаю': 

<div id="occassion">
    content
</div>

Это неправильно и, что гораздо важнее, не согласуется с вашим собственным написанием слова в тексте ссылки в элементе li (где оно было Occasion Cakes). Поэтому я исправил ошибку в div.

Надеюсь, это вам пригодится.

Ссылки

  1. Обычный JavaScript:

  2. JQuery:

0 голосов
/ 27 марта 2012

Добавление предотвращения по умолчанию должно решить вашу проблему ..

Например: 

$("#wedding-tab").live('click', function(e) {
    $("#wedding").show();
    $("#birthday").hide();
    $("#christening").hide();
    $("#occassion").hide();
    e.preventDefault();
});
0 голосов
/ 27 марта 2012 
$(document).ready(function() {
    var h1 = $("#wedding").height();
    var h2 = $("#birthday").height();
     var h3 = $("#christening").height();
     var h4 = $("#occassion").height();
    $("#wedding,#birthday,#christening,#occassion").height(Math.max(h1, h2, h3, h4));

    $("#birthday, #christening, #occassion").hide();
// });

    $("#wedding-tab").live('click', function() {
        $("#wedding").show();
        $("#birthday, #christening, #occassion").hide();
        return false;
    });

    $("#celebration-tab").live('click', function() {
        $("#birthday").show();
        $("#wedding, #christening, #occassion").hide();
        return false;
     });

    $("#christening-tab").live('click', function() {
         $("#christening").show();
         $("#wedding, #birthday, #occassion").hide();
        return false;
    });

    $("#cupcakes-tab").live('click', function() {
          $("#occassion").show();
        $("#wedding, #birthday, #christening").hide();
        return false;
    });

});
0 голосов
/ 27 марта 2012

вы хотите предотвратить дефолт как часть вашего события клика 

$("#christening-tab").live('click', function(e) {
 e.preventDefault();
 $("#wedding").hide();
 $("#birthday").hide();
 $("#christening").show();
 $("#occassion").hide();
});
...