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

Question

На странице 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> 

Здесь Am показать/скрыть основе div's на url утра запускающего.

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

Но, как я, используя тот же подраздел Div- promptPanel под двумя разными div мой контент не загружается должным образом. promptPanel есть pentaho systemdiv. Я пытаюсь получить еще один div, чтобы изменить css для моего prpt.

Спасибо.

Answer 1

Чтобы повторить то, что сказал нам Мойше: id должны быть уникальными. В настоящее время у вас есть два идентификатора promptPanel, что означает, что второй, вероятно, никогда не будет вызван. Теперь вы можете использовать javascript, но с минимальным знанием того, как выглядит ваш код, вы можете использовать простой хэш-код + некоторый базовый 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>