Question

嗨，有人可以协助我修改这个编码我正在尝试删除href页面#html加载并使用带有文本的预装li来点击链接时填充sclit div。

<div id="sclit"></div>
<!-- old code
<a href="page1.html" class="para">Sci Lit 1</a>
<a href="page2.html" class="para">Sci Lit 2</a>
<a href="page3.html" class="para">Sci Lit 3</a>
-->

<ul style="display:none">
<li class="page1"> text text </li>
<li class="page2"> text text </li>
<li class="page3"> text text </li>
</ul>

<script>
jQuery(document).ready(function() {
    jQuery(".para").click(function() {
       // jQuery("#sclit").load(jQuery(this).attr('href')); // old code
        jQuery("#sclit").load(jQuery(this).attr('li'));
    });
});
</script>

Answer 1

我认为你只是试图消除.load，在这种情况下你可以做这样的事情：

http://jsfiddle.net/GgMee/

将html标记更改为：

<div id="sclit"></div>

<a href="javascript:void(0)" class="para">Sci Lit 1</a>
<div class="details">text for sci lit 1</div>

<a href="javascript:void(0)" class="para">Sci Lit 2</a>
<div class="details">text for sci lit 2</div>

<a href="javascript:void(0)" class="para">Sci Lit 3</a>
<div class="details">text for sci lit 3</div>

隐藏每个链接后的details div，并包含单击该链接时要显示的文本。

然后jquery是这样的：

$(function(){
    $(".para").click(function(){
        $("#sclit").text($(this).next(".details").text()); 
    });
});

点击链接，在其后找到details div并将其中的文本放入sclit div。

Answer 2

jQuery(function() {
    // preload all li's with the content of each anchors href beforehand
    jQuery(".para").each(function(e) {
        var $li = $("<li />").load($(this).attr('href'));
        $("ul").append($li);
    });

    // now that data is already present in the li's (and if the indexes match up
    // which they should if your html is accurate) swap the divs html with 
    // the content of the corresponding li
    jQuery(".para").click(function(e) {
        e.preventDefault();
        jQuery("#sclit").html($("ul li:eq(" + $(this).index() + ")"));
    });
});

Answer 3

我不确定我是否正确理解了您的问题，但如果我没有错，则要求是

用户点击li标记
div sclit从li标签中获取文本。

如果这是正确的，那么应该这样做

<div id="sclit"></div>
<!-- old code
<a href="page1.html" class="para">Sci Lit 1</a>
<a href="page2.html" class="para">Sci Lit 2</a>
<a href="page3.html" class="para">Sci Lit 3</a>
-->

<ul style="display:none">
<li class="page1"> text text </li>
<li class="page2"> text text </li>
<li class="page3"> text text </li>
</ul>

<script>
jQuery(document).ready(function() {
    jQuery("li").click(function() {
       // jQuery("#sclit").load(jQuery(this).attr('href')); // old code
        jQuery("#sclit").html(jQuery(this).text());
    });
});
</script>

改变jQuery加载代码

3 个答案: