javascript - 显示右侧的内容

Question

演示中显示 http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview我面临两个问题，可以使用简单的 css/bootstrap 代码来解决。

以下是我面临的问题。

1)当用户单击左侧的任何选项时，我试图在右侧显示内容。现在，当用户单击任何链接(操作系统包、选项二)时，内容将显示在 plnkr 演示中列出的选项下方。当用户单击任何选项时如何在右侧显示内容的任何建议。

2)第二个问题是当用户单击一个选项时，它会显示内容，如果用户选择相同的选项，它会隐藏内容。我不想在用户单击相同的选项时再次隐藏内容第二次链接。我尝试修改 ng-click 但无法得到预期的输出。

html代码:

<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div  ng-controller="MainCtrl">
  <div class="workspace">
    <div class="sidebar-wrap">
      <h3>Click below options:</h3>
      <div class="sidebar-contents">
    <a class="nav clearfix"
      ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
      ng-class="{ 'active' : showOsPackages }">
OS Packages  
     </a>
    <p>
    <a class="nav clearfix"
      ng-click="optionTwo=!optionTwo; showOsPackages=false"
      ng-class="{ 'active' : optionTwo }">

      Option Two

    </a>
    </p>
      </div>
    </div>
      <div class="" ng-show="showOsPackages">
    <h1>OS Packages</h1>
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
    </div>
    <div class="" ng-show="optionTwo">

    <h1>Option Two</h1>
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
    </div>

  </div>
</div>
</div>
</div>

js代码:

var app = angular.module('plunker', ["ngAnimate"]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'slideout steeze';
});

任何建议都会有帮助。

Answer 1

我检查了你的代码。以下是更正。

• 我试图在用户单击任何内容时在右侧显示内容 选项位于左侧。现在当用户点击 任何链接(操作系统包，选项二)，内容显示在 到 plnkr 演示中列出的选项。任何 建议用户如何在右侧显示内容 单击任意选项。

首先，我用 contents-wrap 类将您的内容包装在一个包装 div 中，然后 sidebar-wrapper 和 contents-wrap 可以是分别设置为 30% 和 70%，这样我们就得到了想要的结果。

CSS:

.contents-wrap{
  display:inline-block;
  width:70%;
  float:left;
}

.sidebar-wrap{
  display:inline-block;
  width:30%;
  float:left;
}

• 第二个问题是，当用户单击某个选项时，它会显示内容，如果用户选择相同的选项，它会再次隐藏内容。我不想在用户单击相同的链接时再次隐藏内容第二次。我尝试修改 ng-click 但无法得到预期的输出。

为此，我建议将相应的变量设置为 true，而不是切换输入。

Plunkr Demo

但这里有一个更好的版本，你只使用一个变量toggle，并将选定的选项卡名称设置为toggle变量，使用这种方法，需要定义的变量数量为减少。

Plunkr Demo