Altering a jQuery load code

Hi can someone assist me with altering this coding I'm trying to remove the href page#.html loading and use a preloaded li with the text to populate the sclit div when a link is clicked.

<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开发者_如何学JAVA("#sclit").load(jQuery(this).attr('li'));
    });
});
</script>

I think you're just trying to eliminate the .load in which case you could do something like this:

http://jsfiddle.net/GgMee/

Change the html markup to this:

<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>

Where the details div after each link is hidden and contains the text you want to display when that link is clicked.

Then the jquery is this:

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

Clicking on a link, finds the details div after it and puts the text from it into the sclit div.

I am not sure if I have understood your problem correctly but if I am not wrong the requirement is

1. User clicks a li tag
2. the div sclit takes the text from the li tag.

If that is correct then this should do it

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