DIV содержимое Скрыть / показать на основе URL

В html странице смотрю div-reportControlPanelкак ниже . Я включил другой div-reportControlPanel1как же с другим идентификатором .

<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>

Здесь показываю / скрываю div'sоснованный на urlсрабатывании .

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

Но так как я использую один и тот же sub Div — promptPanel при двух разных divмой контент не загружается должным образом . promptPanelpentaho systemиспользуется div. Я пытаюсь иметь другойdiv, чтобы изменить некоторые cssдля моего prpt.

Спасибо.

1 ответ

  1. Повторю то, что уже сказал вам Мойше: idпредназначены для того, чтобы быть уникальными. В настоящее время у вас есть два promptPanelid, что означает, что второй, скорее всего, никогда не будет вызван. Теперь вы можете использовать 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>