在跨度中显示选择文本

Question

So let's say I have this code:

<span id="select_list">
    <ul>
        <li><a id="1">1</a></li>
        <li><a id="2">2</a></li>
        <li><a id="3">3</a></li>
    </ul>
</span>
<span id="selection"></span>

And let's also assume that there are a lot of list elements, ex. '4,5,6,7... etc'. Can I get a html file, that is basically just text, that corresponds to the list element's ID (ex. 1.html, 2.html,... etc), to show in 'selection'? If so how? Thanks for your time. Hope I explained it well.

Answer 1

Something like this (jQuery) should work:

var list = $("#select_list");
var sel = $("#selection");

$("a", list).on("click", function(){
    var id = $(this).attr("id");
    sel.load(id+".html");
}); 

Answer 2

<div id="select_list">
    <ul>
      <li id="1"><a href="#">1</a></li>
      <li id="2"><a href="#">2</a></li>
      <li id="3"><a href="#">3</a></li>
</ul>
</div>
<div id="selection"></div>

i would use a div not span spans are for if you want to change the size of something particular like this:

  <li id="1" href="#"><a href="#"><span style="color: red; 
  font-size: 30px">1</span></a></li>

and from what i am understanding you want a selector to select them in css?

if so this is how:

 #select_list ul li:nth_child(1) {

 }

or

#select_list ul li#2 {

 }

hope this helps you

Answer 3

I would suggest using data-attributes instead of IDs.

HTML

<ul class='selection-list'>
    <li data-name='Dog'>Dog</li>
    <li data-name='cat.html'>Cat</li>
    <li data-name='45'>Fourty Five</li>
    <li data-name='Triangle'>Three sides</li>
</ul>

<div class="output js-output"></div>

jQuery

var $output = $('.js-output');

$('.selection-list li').on('click', function() {
    var selectionValue = $(this).data('name');
    $output.text(selectionValue);
});

CSS

.selection-list li {
    cursor: pointer;
}

jsFiddle

iframe

I'm starting to think that you are asking for an iframe with dynamic source. The question is unclear. You may want to try and rewrite it. - Here is what I think you may be after...

HTML

<ul class='selection-list'>
    <li data-url='http://reputable.agency'>Reputable Agency</li>
    <li data-url='http://perpetual.education'>Perpetual Education</li>
    <li data-url='http://example.com/index.html'>Example.com</li>
</ul>

<iframe src='http://example.com' class="output js-output"></iframe>

JavaScript / jQuery

var $output = $('.js-output');

$('.selection-list li').on('click', function() {
    // get the 'data-url' from the element...
    var selectionValue = $(this).data('url');
    // put that data-url into the src attribute of the iFrame
    $output.attr('src', selectionValue);
});

Also..

Note that if you are using the same domain for all of these, you can build those urls differently to keep things simple.

<li data-url='index.html'>Example.com</li>

$output.attr('src', 'http://yoursite.com/' + selectionValue);

jsFiddle

AJAX

Now I'm wondering if you mean AJAX. Here is an example - but it's not tested because I don't have access to a bunch of relative URLs - but here is the basics - and should lead you to the right documentation.

HTML

<ul class='selection-list'>
    <li data-url='index.html'>Reputable Agency</li>
    <li data-url='index.html'>Perpetual Education</li>
    <li data-url='index.html'>Example.com</li>
</ul>

<div class="output js-output"></div>

JavaScript / jQuery

var $output = $('.js-output');

var getOtherPage = function(target) {
    $.ajax({
       url: target,
       success:function(response){
          $output.html(response);
       },error:function(){
          alert("error");
       }
    });
};

$('.selection-list li').on('click', function() {
    var selectionValue = $(this).data('url');
    getOtherPage(selectionValue);
});