Question

这就是我追求的目标。

我需要每个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"));
    });
});

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

Answer 1

您没有定义event。改写为：

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

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

Answer 2

缺少参数。您需要在函数

中传递event

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

});

Answer 3

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

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

Answer 4

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

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

也就是说，LI标签没有默认操作来阻止和给出提供的代码，锚标签仍然会有默认操作。您可能希望将单击操作放在锚标记上。

Answer 5

事件参数缺失，但我不认为这完全解决了这个问题。这是一个完整的标记和我相信你想要完成的例子。

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>

用另一个替换段落

5 个答案: