DIV-Inhalt ausblenden/anzeigen basierend auf URL

Question

In HTML-Seite habe ich eine div-reportControlPanel wie unten. Ich habe ein anderes als dasselbe mit unterschiedlicher Identifikation eingeschlossen.

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

Hier Am anzeigen/ausblenden div's basierend auf url Uhr ausgelöst wird.

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

Aber wie ist mit gleicher Unter Div- promptPanel unter zwei verschiedenen div meine Inhalte nicht richtig geladen ist. promptPanel ist pentaho system verwendet div. Ich versuche, eine andere div zu haben, um einige css für meine zu ändern.

Danke.

Answer 1

Um noch einmal zu wiederholen, was Moishe schon zu dir gesagt hat: id sollen einzigartig sein. Sie haben derzeit zwei promptPanel IDs, was bedeutet, dass der zweite wahrscheinlich nie aufgerufen wird. Nun könnten Sie Javascript verwenden, aber mit minimalem Wissen darüber, wie Ihr Code aussieht, könnten Sie eine einfache Hash-URL und einige grundlegende CSS verwenden.

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