javascript - 如何将链接添加到我的菜单并获取内容以显示文本

Question

我正在使用我想用于我网站的当前垂直菜单。我想知道如何获取菜单，以便当我选中左侧的按钮时，它会使选项卡处于事件状态，并在右侧的内容 div 上显示信息(文本)。我希望每个人都有一些不同的信息。

代码:

 $(function() {

    	        var verticalNavigation = new
    	    SSDSystem.VerticalNavigation();
    	        verticalNavigation.init();

    	});

body {
     background-color: #fff;
     color: #666;
     font-family: "Open sans", Sans-serif;
     padding: 0;
     margin: 0
    }

    a {
     text-decoration: none
    }

    h1 {
     margin-top: 0
    }

    #contentWrapper {
     width: 100%;
     height: 100%;
     position: relative
    }

    #contentLeft {
     z-index: 10;
     width: 250px;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background-color: #283c51
    }

    #contentRight {
     padding: 1.3rem 2rem;
     margin-left: 250px
    }

    #leftNavigation {
     margin: 2rem 0
    }

    #leftNavigation,
    #leftNavigation li ul {
     list-style: none;
     padding: 0
    }

    #leftNavigation li a {
     font-size: 0.875rem;
     display: block;
     padding: 0.8rem 1rem 0.8rem 3rem;
     color: #adadad;
     border-bottom: solid 1px #395673;
     text-overflow: ellipsis;
     overflow: hidden;
     position: relative;
     -webkit-transition: color 0.2s ease;
     transition: color 0.2s ease
    }

    #leftNavigation li a,
    #leftNavigation li a .leftNavIcon {
     line-height: 120%
    }

    #leftNavigation li a .leftNavIcon {
     position: absolute;
     top: 0;
     left: 0;
     width: 3rem;
     padding: 0.8rem 0;
     text-align: center
    }

    #leftNavigation li a:hover {
     color: #fff
    }

    #leftNavigation li ul {
     display: none;
     margin: 0;
     background-color: #17232f
    }

    #leftNavigation li ul li a {
     border-bottom: solid 1px #233547
    }

    #leftNavigation li ul li:last-child a {
     border-bottom: none
    }

    #leftNavigation li ul li.active a {
     color: #fff
    }

    #leftNavigation li.active>a {
     color: #fff
    }

    #leftNavigation li.active ul {
     display: block
    }

    #leftNavigation>li.active {
     background-color: #427c97
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="contentWrapper">
  <div id="contentLeft">
    <ul id="leftNavigation">
      <li class="active"> <a href="#"><i class="fa fa-angle-down leftNavIcon"><br></i>Promeion</a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      </li>
      <li> <a href="#Athemia"><i class="fa fa-angle-down leftNavIcon"></i> Menu 2 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      </li>
      <li> <a href="#"><i class="fa fa-angle-down leftNavIcon"></i> Menu 3</a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      </li>
      <li> <a href="#"><i class="fa fa fa-angle-down leftNavIcon"></i> Menu 4 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      <li> <a href="#"><i class="fa fa fa-angle-down leftNavIcon"></i> Menu 6 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      <li> <a href="#"><i class="fa fa fa-angle-down leftNavIcon"></i> Menu 6 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      <li> <a href="#"><i class="fa fa fa-angle-down leftNavIcon"></i> Menu 7 </a>
        <ul>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> World Details & Rules </a> </li>
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Ranks & Commands </a> </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="contentRight">
    Test
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/object/VerticalNavigation.min.js"></script> 
<script src="js/app.js"></script>

Answer 1

您可以使用 jQuery hide() 和 show()。当您单击侧面的链接时，您将隐藏() 当前的<div>。然后显示() <div>他们点击了。

教程在这里:http://www.w3schools.com/jquery/jquery_hide_show.asp