用 Jquery 替换 Div - 屏幕移动

Question

我想通过点击链接来更改我的 div 内容，这目前通过使用 id 来显示隐藏内容上的 div 来工作。

但是屏幕移动到点击的 div 的顶部 - 我知道那是因为它链接到移动到 id 的位置，有没有一种方法可以不管用户在页面向下滚动多远时可以点击屏幕不会移动到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();
});

Answer 1

添加阻止默认值应该可以解决您的问题..

例如：

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

Answer 2

您想在点击事件中阻止默认设置

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

Answer 3

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

});

Answer 4

我可以展示一个稍微简洁一点的脚本墙吗：

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

JS Fiddle demo.

这假设您只想在单击链接时显示带有相应 id 的 div（单击“婚礼标签”链接将显示“婚礼”div，并隐藏其他 div？

它阻止了被点击的a 的默认动作，所以在你点击链接后窗口不应该移动。

另外，我修正了您标记中的一个错字，div id 是“偶然”：

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

这是错误的，更重要的是，它与您自己在li 元素中的链接文本中的单词拼写不一致（它是Occasion Cakes）。所以我修正了 div 的拼写错误。

希望这对你有用。

参考资料：

1. 常规 JavaScript：

   • firstChild。
   • nodeValue。
   • split()。
   • toLowerCase()。

2. jQuery:

   • click()。
   • event.preventDefault()。
   • hide()。
   • not()。
   • siblings()。
   • toggle()。