0

我想通过单击链接更改我的 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();
});
4

4 回答 4

0

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

$("#christening-tab").live('click', function(e) {
 e.preventDefault();
 $("#wedding").hide();
 $("#birthday").hide();
 $("#christening").show();
 $("#occassion").hide();
});
于 2012-03-27T16:01:59.530 回答
0

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

例如：

$("#wedding-tab").live('click', function(e) {
    $("#wedding").show();
    $("#birthday").hide();
    $("#christening").hide();
    $("#occassion").hide();
    e.preventDefault();
});
于 2012-03-27T16:02:59.953 回答
0 
$(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;
    });

});
于 2012-03-27T16:08:15.797 回答
0

我可以展示一个更简洁的脚本墙版本吗：

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

JS 小提琴演示。

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

它会阻止 clicked 的默认操作a，因此单击链接后窗口不应移动。

另外，我在你的标记中修正了一个错字，divid是 'occassion'：

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

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

希望这对你有一些用处。

参考：

  1. 常规 JavaScript：

  2. jQuery：

于 2012-03-27T16:35:23.223 回答