javascript - 如何通过 Javascript 获取 html List 值？

Question

我正在尝试从 html list 获取值<li>。

<ul>
    <li><a>Main Menu</a>
        <ul class="leftbutton" >
            <li value="List1"><a>Sampe 1</a></li>
            <li value="List2"><a>Sample 2</a></li>
            <li value="List3"><a>Sample 3</a></li>
            <li value="List4"><a>Sample 4</a></li>
            <li value="List5"><a>Sample 5</a></li>
        </ul>
    </li>
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

function changeList()
{
    var iframe = document.getElementById("iframeid");  
    var url = document.getElementById("selectedlist").value + ".html"; 
    iframe.src = url;
}

我会在哪里放置 onClick="changeList()" 以从列表中获取值？

Answer 1

你在这里弄错了几件事。

1. HTML 列表项 ( <li>) 没有值
2. HTML 列表没有“选定项目”
3. 您无法通过调用获得任何“选定”项目getElementById()

这是我的替代建议：

<ul>
  <li><a>Main Menu</a>
    <ul class="leftbutton" >
      <li><a href="List1.html" onclick="return changeList(this);">Sample 1</a></li>
      <li><a href="List2.html" onclick="return changeList(this);">Sample 2</a></li>
      <li><a href="List3.html" onclick="return changeList(this);">Sample 3</a></li>
      <li><a href="List4.html" onclick="return changeList(this);">Sample 4</a></li>
      <li><a href="List5.html" onclick="return changeList(this);">Sample 5</a></li>
    </ul>
  </li>
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

<script type="text/javascript">
function changeList(a)
{
  var iframe = document.getElementById("iframeid");
  iframe.src = a.href;
  return false;
}
</script>

想法：如果 JavaScript 被停用，它仍然可以工作（初步）。该函数返回false，因此当启用 JavaScript 时，单击链接会取消 href 导航。

请注意，直到 HTML 4.01 Transitional 也可以完全不使用 JavaScript。具有框架名称的target属性就足够了：

<ul>
  <li><a>Main Menu</a>
    <ul class="leftbutton" >
      <li><a href="List1.html" target="iframename">Sample 1</a></li>
      <li><a href="List2.html" target="iframename">Sample 2</a></li>
      <li><a href="List3.html" target="iframename">Sample 3</a></li>
      <li><a href="List4.html" target="iframename">Sample 4</a></li>
      <li><a href="List5.html" target="iframename">Sample 5</a></li>
    </ul>
  </li>
</ul> 

<iframe id="iframeid" name="iframename" width="100%" height="100%" align="middle"></iframe> 

Answer 2

我不是 100% 确定内联 iframe，但你可以简单地使用

<li><a href="/path/to/html" target="myIframeId">Value</a></li>

这不是有效的 html 4 strict 但对过渡有效并且无论如何都适用于所有浏览器。

Answer 3

li有属性值，但值应该是整数，这就是重点：

             <li value="1"><a>Sampe 1</a></li>
            <li value="2"><a>Sample 2</a></li>
            <li value="3"><a>Sample 3</a></li>
            <li value="4"><a>Sample 4</a></li>
            <li value="5"><a>Sample 5</a></li>

Answer 4

你可以把它放在锚标签上，因为我认为这是你点击的。