在span中显示选择文本

Question

所以，让我说我有这个代码：

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

让我们假设有很多列表元素，例如。 ＆＃39; 4,5,6,7 ...等＆＃39;。 我可以获得一个html文件，它基本上只是文本，对应于列表元素的ID（例如1.html，2.html，...等），以显示在＆＃39;选择＆＃ 39 ;? 如果是这样的话？ 谢谢你的时间。希望我解释得很好。

Answer 1

像这样的东西（jQuery）应该可以工作：

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>

如果你想改变像这样特别的东西的大小，我会使用div而不是span span：

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

根据我的理解，您希望选择器在css中选择它们吗？

如果是这样的话：

 #select_list ul li:nth_child(1) {

 }

或

#select_list ul li#2 {

 }

希望这可以帮助你

Answer 3

我建议使用数据属性而不是ID。

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

我开始认为您要求使用动态源iframe。问题不明确。您可能想尝试重写它。 - 这就是我认为你可能会追随的......

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);
});

还..

请注意，如果您对所有这些域使用相同的域，则可以采用不同的方式构建这些域以简化操作。

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

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

jsFiddle

AJAX

现在我想知道你是不是指AJAX。这是一个示例 - 但它没有经过测试，因为我无法访问一堆相关网址 - 但这是基础知识 - 并且应该引导您找到正确的文档。

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);
});