javascript - DIV 内容根据 URL 隐藏/显示

Question

在 html 页面中有一个 div-reportControlPanel 如下。我已经包含了另一个 div-reportControlPanel1 相同但 id 不同。

<div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>

<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
 </div>

这里是根据 url 触发显示/隐藏 div 的。

    if(prptName == "css.prpt")
{
alert("if");
document.getElementById("reportControlPanel").style.display = 'none';
document.getElementById("reportControlPanel1").style.display = 'block';
}

但是因为我在两个不同的 div 下使用相同的子 Div-promptPanel 我的内容没有正确加载。 promptPanel是pentaho系统使用的div。我正在尝试使用另一个 div 来为我的 prpt 修改一些 css。

谢谢。

Answer 1

重申一下 Moishe 已经对您说过的话:id 是唯一的。您目前有两个 promptPanel id，这意味着第二个可能永远不会被调用。现在，您可以使用 javascript，但只要对代码的外观了解最少，您就可以使用简单的哈希 url + 一些基本的 css。

$(document).ready(function() {
  $('a').click(function() {
    $('#url').html($(this).prop('href'));
  });
});

div.pentaho-rounded-panel-bottom-lr {
  display: none;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
  display: block;
}
:target {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"></div>
<a href="#reportControlPanel1">"Open" panel 1</a>
<a href="#reportControlPanel2">"Open" panel 2</a>
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
    this is some text in the first control panel.
  </div>
</div>

<div id="reportControlPanel2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
    this is some text in the second control panel
  </div>
</div>