2

这就是我所追求的。

我需要我的每个 LI 来替换名为“moreInfo”的 div 中的当前段落。

到目前为止，我已经尝试给每个 li 一个 ID，并且每个附加段落都设置为不显示。我已经设置了一个默认段落并在单击任何选项卡 (LI) 之前显示该段落。

<ul class="sideLinks">

    <li id="sideLink1">
        <a href="" >Favorites</a>
    </li>

    <li id="sideLink2">
        <a href="">Scope</a>
    </li>

    <li id="sideLink3">
        <a href="">Concierge</a>
    </li>

    <li id="sideLink4">
        <a href="">Share</a>
    </li>

    <li id="sideLink5">
        <a href=""> Reminders</a>
    </li>
</ul>

到目前为止，这是我为 jQuery 设置的内容，但是由于某些奇怪的原因，我在第一个链接上遇到了错误。

$(document).ready(function(){
    $('li#sideLink1').click(function () {
        event.preventDefault();
        $('#moreinfo').html($("p#favorites"));
    });
});

任何帮助将不胜感激！谢谢！

4

5 回答 5

1

你不定义event. 改写为：

$("#sideLink1").click(function (event) { ...

另请注意，如果您使用 ID，则不需要将元素名称作为选择器的一部分。它甚至可能减慢选择器的速度。

于 2012-12-06T16:12:10.013 回答
0

缺少论据。您需要event在函数中传递

$('li#sideLink1').click(
    function (event) {
    event.preventDefault();
    $('#moreinfo').html($("p#favorites"));

});
于 2012-12-06T16:13:00.660 回答
0 
jQuery(function($){
    $('li#sideLink1').click(function (event) {
        event.preventDefault();
        $('#moreinfo').html($("p#favorites").html());
    });
});

.html()接受字符串作为参数，而不是 jQuery 对象。

于 2012-12-06T16:13:19.840 回答
0

您得到的错误可能是因为您没有将事件对象传递给匿名函数。

$('li#sideLink1').click(
    function(event) {
        event.preventDefault();
        $('#moreinfo').html($("p#favorites"));
    }
);

也就是说，LI 标签没有默认操作来阻止，并且给定提供的代码，锚标签仍然具有它的默认操作。您可能希望将点击操作放在锚标记上。

于 2012-12-06T16:22:25.117 回答
0

缺少事件参数，但我认为这不能完全解决问题。这是我认为您正在尝试完成的完整标记和示例。

http://jsfiddle.net/psyon001/zjQy7/

我使用了锚点，因此如果禁用了 js，您可以添加一个 no-js 类定义来显示块，并且链接将锚定到文本，使其更优雅地降级。

<style>
    #moreInfo p{display:none;}
    #moreInfo p#default{display:block;}
</style>

-

<ul class="sideLinks">
    <li>
        <a href="#favoritesDetail">Favorites</a>
    </li>
    <li>
        <a href="#scopeDetail">Scope</a>
    </li>
    <li>
        <a href="#conciergeDetail">Concierge</a>
    </li>
    <li>
        <a href="#shareDetail">Share</a>
    </li>
    <li>
        <a href="#remindersDetail">Reminders</a>
    </li>
</ul>
<div id="moreInfo">
    <p id="default"></p>
    <p id="favoritesDetail">Favorites description...</p>
    <p id="scopeDetail">Scope description...</p>
    <p id="conciergeDetail">Concierge description...</p>
    <p id="shareDetail">Share description...</p>
    <p id="remindersDetail">Reminders description...</p>
</div>

-

<script>
$('.sideLinks').find('a').on('click', function(e){
    e.preventDefault();
    var $moreInfo = $('#moreInfo'),
        id = $(this).attr('href');
    $moreInfo.find('p').hide();
    $moreInfo.find(id).show();
});​
</script>
于 2012-12-06T16:35:48.797 回答