Изменение кода загрузки jQuery

Question

Привет, может кто-нибудь помочь мне с изменением этой кодировки. Я пытаюсь удалить загрузку href page # .html и использовать предустановленный li с текстом для заполнения разделенного элемента 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

Я не уверен, правильно ли я понял вашу проблему, но если я не ошибаюсь, требование

1. Пользователь нажимает на тег li
2. 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>

Answer 3

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