DIV內容隱藏/顯示基於URL

在html頁面我有一個div-reportControlPanel如下。我已經包含另一個div-reportControlPanel1與不同的id相同。DIV內容隱藏/顯示基於URL

<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's。

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

但使用同一子Div- promptPanel下的兩個不同div我的內容不正確加載的上午。 promptPanel是pentaho system使用div。我正在嘗試另一個div修改我的prpt的一些css。

感謝。

來源

2016-05-27 user3007361

的ID，就是要在頁面上獨一無二的。只有一個元素應該具有'promptPanel'的標識。要使用共享屬性來定位多個元素，您可以使用'class'，例如'pentaho-rounded-panel-bottom-lr'。 –

你可以使用jQuery嗎？您可以稍後添加ID，如：$（'。pentaho-rounded-panel-bottom-lr> div'）。attr（'id'，'promptPanel'）;'取決於實際加載的DIV（取決於url） – LordNeo

id屬性爲HTML元素指定一個唯一的id（該值在HTML文檔中必須是唯一的）。 – Shrabanee

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

來源

2016-05-27 05:58:41 Jhecht

實際上，promptPanel是一個由pentaho s/w用來顯示reportpanel內部參數的id。我不應該編輯該div ID ..我需要一個類似的div爲我的prpt（文件），我想做一些CSS更改。 Css將在默認的penatho系統文件中指定，我可以在其中添加reportControlPanel1 css。 – user3007361

主要的事情就像我需要根據觸發的url來更改css屬性。我不應該編輯默認的Div - reportcontrolpanel，這將影響其他用戶使用pentaho報告。 – user3007361

如果您想在完整的網頁上嘗試我的示例，您會看到當您點擊這兩個鏈接中的任意一個來模擬您通過網址輸入的位置時，位置會發生變化。 – Jhecht

DIV內容隱藏/顯示基於URL

回答

相關問題