java - 私のメニューに動的CSSが適用されていません(タイル+春3.0)




4 Answers

Quaternionによって公開されているように、selectedTabを現在の関係要素に適用することは、サーバー側のメニュー構造であると考えています。

しかし、 本当にそれを行うことができなければ、あなたは( 注意深く...汚れ )jsのdocument.location.hrefを解析して、あなたがどのページにいるかを知り、selectedTabクラスを正しい要素に適用することができます。

私はSpring 3.0 +タイルを使用しています。 私は、すべてのページのアンカータグで共通メニューを作成し、同じものにCSSを適用しました。 私は、メニューがクリックされたときにメニューのCSSクラスを動的に変更するためにJqueryを使用しています。

メニュー/リンクを選択すると、 "selectedTab" cssクラスが適用され、すべての通常のリンク "tab" CSSクラスが適用されます。 私は、各リクエストで/メニューをクリックするとスタイルクラスが適用され、その後レスポンスの後に再び適用されないという問題に直面しています。 つまり、要求と応答の間にスタイルが適用されたままです。 しかし、応答の後ではありません。 メニューリンクのコードは次のとおりです:

<div id="menu" class=" mainPageLayout clearFix" style="width:980px;margin:0 auto;">
    <a id="dashboard" class="selectedTab" href="dashboard.html" onclick="return changeCss('dashboard');">
        <span>Dashboard</span>
    </a>

    <a id="projects" class="tab" href="projectscontroller.html" onclick="return changeCss('projects');">
        <span>Projects</span>
    </a>

    <a id="milestones" class="tab" href="milestones.html" onclick="return changeCss('milestones');">
        <span>Milestones</span>
    </a>

    <a id="tasks" class="tab" href="tasks.html" onclick="return changeCss('tasks');">
        <span>Tasks</span>
    </a>

    <a id="discussions" class="tab" href="messages.html" onclick="return changeCss('discussions');">
        <span>Discussions</span>
    </a>

    <a id="reports" class="tab" href="reports.html" onclick="return changeCss('reports');">
        <span>Reports</span>
    </a>

    <a id="history" class="tab" href="projects/history.html" onclick="return changeCss('history');">
        <span>History</span>
    </a>

    <a id="templates" class="tab" style="float: right;" href="projects/users.html" onclick="return changeCss('templates');">
        <span>Project templates</span>
    </a>

    <a id="users" class="tab" style="float: right;" href="projects/projectTemp.html" onclick="return changeCss('users');">
        <span>Users</span>
    </a>
</div>

同じJqueryは次のとおりです。

function changeCss(aid){//アラート(援助);

jQuery("#menu a").removeClass("selectedTab");
jQuery("#menu a").addClass("tab");


jQuery("#"+ aid).removeClass("tab");
jQuery("#" + aid).addClass("selectedTab");

}

メニューのCSSクラスは次のとおりです。

a.selectedTab:hover、.studioTopNavigationPanel .contentSection .navigationBox a .selectedTab:アクティブ{background-color:#B8D9ED; 背景画像:url( "../ images / tab_selected_bg.png"); 背景 - 位置:センタートップ; バックグラウンドリピート:repeat-x; 色:#333333; カーソル:ポインタ; 表示ブロック; float:left; font-size:14px; margin-right:3px; パディング:5px 12px; テキスト装飾:なし; }

.studioTopNavigationPanel .contentSection .navigationBox a.tab, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:active 
{
    background-color: #ECF3F7;
    background-image: url("../images/tab_bg.png");
    background-position: center top;
    background-repeat: repeat-x;
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 3px;
    padding: 5px 12px;
    text-decoration: none;
}



.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:active 
{
    background-color: #B8D9ED;
    background-image: url("../images/tab_selected_bg.png");
    background-position: center top;
    background-repeat: repeat-x;
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 3px;
    padding: 5px 12px;
    text-decoration: none;
}

私が間違っている場所を教えて、可能な限り早急に適切な解決策を提示してください。




jQuery(function(){
  jQuery("#menu a").on("click",function(){
    jQuery("#menu a").removeClass("selectedTab");
    jQuery("#menu a").addClass("tab");
    jQuery(this).removeClass("tab");
    jQuery(this).addClass("selectedTab");
 })
});



これを試して

.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:active 
{
background-color: #B8D9ED !important;
background-image: url("../images/tab_selected_bg.png");
background-position: center top;
background-repeat: repeat-x;
color: #333333!important;
cursor: pointer;
display: block;
float: left;
font-size: 14px;
margin-right: 3px;
padding: 5px 12px;
text-decoration: none;
}



<html>
<head>
<style type="text/css">
 .about_normal
 {
   background-color:red;
   color:blue;
 }
 .about_active
 {
   background-color:black;
   color:green;
 }
</style>
<script type="text/javascript">
var divSelected = null;
function SelectOrUnSelect(x)
{
if(divSelected != null) divSelected.className = 'about_normal';
divSelected = x;
x.className = 'about_active';
}
</script>
</head>
<body>
 <ul>
  <li class="about_normal" id="t1"><a href="#1" onclick="SelectOrUnSelect(t1)">Our Mission</a></li>
  <li class="about_normal" id="t2"><a href="#2" onclick="SelectOrUnSelect(t2)">Company Info</a></li>
  <li class="about_normal" id="t3"><a href="#3" onclick="SelectOrUnSelect(t3)">All Services</a></li>
  <li class="about_normal" id="t4"><a href="#4" onclick="SelectOrUnSelect(t4)">Press</a></li>
  <li class="about_normal" id="t5"><a href="#5" onclick="SelectOrUnSelect(t5)">Careers</a></li>
 </ul>
</body>
</html>

簡単に試してみてください。 あなたが必要とするものをスタイリングしなければならないのはあなただけです。 その働き。




Related

java jquery tiles spring-3 dynamic-css