如何从有序列表链接到另一个div？

Question

好的，所以我想知道如何创建两个div。在一个你有一个名单的订单列表。在同一页面上的另一个div中，您拥有该名称的属性。

像这样：

<div id="list_of_names">
<ul>
        <li>names</li>
           <ul>
               <li><a href=" div link ? ">name1</a></li>
               <li>name2</li>
               <li>name3</li>
               <li>name4</li>
           </ul>

</ul>
</div>

在另一些图片或其他有关该名称的数据出现。

Answer 1

很简单，您只需要为要链接的div添加ID。像：

<div id="info_1"></div>
<div id="info_2"></div>

然后在a上添加他们的链接

<ul>
   <li><a href="#info_1">name1</a></li>
   <li><a href="#info_2">name2</a></li>
</ul>

你已经完成了。

更新

如果您想进行显示/隐藏而不是链接，那么下面就是示例。在项目中使用jQuery并组织这样的项目。我添加了额外的CSS样式。更改它们以提供自己的样式。

＆＃13;

＆＃13;

$('#index_list').on('click', 'a', function(e) {

  //Prevent default link to work
  e.preventDefault();

  //Taking the id link from href attr
  var selectedDom = $(this).attr('href');

  //Doing show/hide
  $('#content_wrap > div').fadeOut();
  $(selectedDom).fadeIn();

});

＆＃13;

body {
  background: #ffffff;
  position: relative;
}

.index_list {
  width: 200px;
  position: fixed;
  background-color: #22A7F0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 20px;
  list-style: none;
  color: #ffffff;
  box-sizing: border-box;
}

.index_list>li>a {
  color: inherit;
  font-size: 16px;
  line-height: 2;
}

.content_wrap {
  position: fixed;
  background-color: #19B5FE;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 200px);
  box-sizing: border-box;
}

.content_wrap>div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 50px;
  font-size: 30px;
}

#info_1 {
  background-color: #F9690E;
}

#info_2 {
  background-color: #049372;
}

#info_3 {
  background-color: #BF55EC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="index_list" id="index_list">
  <li><a href="#info_1">name1</a></li>
  <li><a href="#info_2">name2</a></li>
  <li><a href="#info_3">name3</a></li>
</ul>
<div class="content_wrap" id="content_wrap">
  <div id="info_1">
    Here is 1st content
  </div>
  <div id="info_2">
    Here is 2nd content
  </div>
  <div id="info_3">
    Here is 3rd content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;