html js 左侧导航菜单

左侧导航菜单通过在需要点击切换的地方加上"data-src"属性来实现。在你要加的地方，添加上iframe标签，并将src属性设置为空，因为还不知道要跳转到哪个页面。然后，通过js代码实现点击导航栏按钮改变iframe的src属性，从而实现页面切换。

以下是示例代码：

<div data-src="page1.html">菜单1</div>
<div data-src="page2.html">菜单2</div>
<div data-src="page3.html">菜单3</div>

<iframe id="iframe" src=""></iframe>

<script>
    let iframe = document.querySelector('#iframe');
    let lis = document.querySelectorAll('div');

    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function (event) {
            iframe.src = event.target.dataset.src;
        }
    }
</script>

相关问题

html左侧导航菜单怎么做

HTML是网页设计的基础语言，它可以用来创建各种类型的网页。左侧导航菜单是一种广泛使用的网页设计元素，可以方便用户快速浏览和访问网站的各个部分。

要制作左侧导航菜单，您可以按照以下步骤进行：

1. 创建HTML结构：使用HTML标记创建导航菜单的基本结构。可以使用`<ul>`和`<li>`标签来创建无序列表。

2. 设计导航菜单的样式：使用CSS样式来定义导航菜单的大小、颜色、字体和其他外观。

3. 创建超链接：为每个导航菜单项创建超链接。您可以使用HTML的`<a>`标签来创建超链接并将其连接到所需的网页。

4. 添加JavaScript：如果您想要导航菜单有交互性，如下拉菜单或扩展菜单，您可以使用JavaScript编写相应的代码。

总之，左侧导航菜单是网页设计中很重要的一部分，它可以提高用户体验和导航效率，需要仔细考虑和设计。制作前要先确定导航菜单的功能和样式，然后根据需要添加必要的JavaScript代码。

js左侧导航栏右侧显示内容

你可以使用HTML和CSS创建一个左侧的导航栏和右侧的内容区域。具体实现方法如下：

1. 创建HTML结构，包括左侧导航栏和右侧内容区域。左侧导航栏可以使用<ul>和<li>标签创建，右侧内容区域可以使用<div>标签创建。

2. 使用CSS设置左侧导航栏和右侧内容区域的样式。可以使用float或者flex布局实现左右两栏的排列。

3. 使用JavaScript或jQuery实现导航栏的交互效果。例如，点击导航栏中的某个选项，可以在右侧内容区域显示对应的内容。

下面是一个简单的示例代码，供参考：

HTML代码：

<div class="container">
  <ul class="nav">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
  <div class="content">
    <section id="section1">
      <h2>Section 1</h2>
      <p>Content of section 1 goes here.</p>
    </section>
    <section id="section2">
      <h2>Section 2</h2>
      <p>Content of section 2 goes here.</p>
    </section>
    <section id="section3">
      <h2>Section 3</h2>
      <p>Content of section 3 goes here.</p>
    </section>
  </div>
</div>

CSS代码：

.container {
  display: flex;
}

.nav {
  width: 20%;
  background-color: #f1f1f1;
  padding: 20px;
}

.nav li {
  margin-bottom: 10px;
}

.nav a {
  display: block;
  padding: 10px;
  background-color: #ddd;
  color: #333;
  text-decoration: none;
}

.content {
  width: 80%;
  padding: 20px;
}

section {
  margin-bottom: 40px;
}

h2 {
  margin-top: 0;
}

JavaScript代码：

$(document).ready(function() {
  $('.nav a').click(function(e) {
    e.preventDefault();
    var sectionId = $(this).attr('href');
    $('.content section').hide();
    $(sectionId).show();
  });
});

在这个示例中，我们使用了flex布局将左侧导航栏和右侧内容区域排列在一起。点击导航栏中的选项时，我们使用jQuery选择器找到对应的内容区域，并显示出来。