Java “我的菜单”中未应用动态css(平铺&x2B;spring 3.0)
我正在使用Spring3.0+互动程序。我已经为所有页面创建了带有锚定标记的公共菜单,并为相同页面应用了css。我使用Jquery在单击菜单时动态更改菜单的css类 选择菜单/链接时,将应用“selectedTab”css类,对于所有正常链接,将应用“tab”css类。我面临的问题是,在每次请求/单击菜单时,都会应用样式类,然后在响应之后再次取消应用。也就是说,样式仍然应用于请求和响应之间。但不是在回应之后。菜单链接的代码如下所示:Java “我的菜单”中未应用动态css(平铺&x2B;spring 3.0),java,jquery,tiles,spring-3,dynamic-css,Java,Jquery,Tiles,Spring 3,Dynamic Css,我正在使用Spring3.0+互动程序。我已经为所有页面创建了带有锚定标记的公共菜单,并为相同页面应用了css。我使用Jquery在单击菜单时动态更改菜单的css类 选择菜单/链接时,将应用“selectedTab”css类,对于所有正常链接,将应用“tab”css类。我面临的问题是,在每次请求/单击菜单时,都会应用样式类,然后在响应之后再次取消应用。也就是说,样式仍然应用于请求和响应之间。但不是在回应之后。菜单链接的代码如下所示: <div id="menu" class=" mainP
<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>
}
菜单的Css类包括:
a、 选择选项卡:悬停,
.studioTopNavigationPanel
.内容部分
.导航框a
.所选选项卡:活动
{
背景色:#B8D9ED;
背景图像:url(“../images/tab_selected_bg.png”);
背景位置:中上;
背景重复:重复-x;
颜色:#333333;
光标:指针;
显示:块;
浮动:左;
字体大小:14px;
右边距:3倍;
填充物:5px12px;
文字装饰:无;
}
请告诉我哪里错了,并尽快提供相应的解决方案。我还认为服务器端菜单结构,将selectedTab应用于当前相关元素是最佳解决方案,正如四元数所揭示的那样
但是,如果你真的不想这样做,你也可以(小心地…脏)解析js中的document.location.href以知道你在哪个页面上,然后将selectedTab类应用到正确的元素。也许你可以尝试以下方法:
var urlProjectsController = 'http://yourdomain.com/projectscontroller.html';
var urlMilestones = 'http://yourdomain.com/milestones.html';
if (window.location.href == urlProjectsController ){
jQuery("#projects").removeClass("tab");
jQuery("#projects").addClass("selectedTab");
}else if (window.location.href == urlMilestones ){
jQuery("#milestones").removeClass("tab");
jQuery("#milestones").addClass("selectedTab");
}
......
......
and so on for the remaining links.
试试这个
.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;
}
.关于正常
{
背景色:红色;
颜色:蓝色;
}
.about_活动
{
背景色:黑色;
颜色:绿色;
}
var divSelected=null;
功能选择器或取消选择(x)
{
如果(divSelected!=null)divSelected.className='about_normal';
div=x;
x、 className='关于_活动';
}
简单地尝试一下。它将只工作,你必须改变造型,无论你需要什么。
工作正常。您在问为什么使用JavaScript设计菜单样式只适用于当前请求而不适用于新页面?是的,使用平铺,当我单击菜单时,会加载请求的整个页面,甚至加载menu.jsp。因此,在请求和响应之间会应用效果,但不会在显示请求的页面后应用效果。当您按f5键时,页面将重新加载(新请求),JavaScript程序将从头开始。对于每一个新请求都是一样的,通过使用客户端持久性解决这个问题是可能的,但是使用多个浏览器窗口(很多用户都会这样做,会产生严重的副作用)。您需要解决服务器端的问题。但是客户端JS解决方案并不是特别好。当您生成HTML时,您可以在元素上放置一个“选定”的HTML类。。。然后使用JS你可以做一些明智的事情。一旦你决定如何设置html类,我们可以帮助你,在这样做的时候也提供一些代码(服务器端)。是的,我也这样做了。我已将SelectedTab类应用于第一次加载页面时保持选中状态的菜单(在我的情况下,dashboard保持选中状态)。所有其他菜单都有“tab”类。然后,使用上面给定的jquery代码,我正在更改菜单的类。为什么说parsing location.href是脏的?我不是说parsing location.href是脏的,我是说,在这个上下文中执行它不是解决问题的最佳方法。在服务器端构建整个菜单要比在没有任何类的情况下构建更为有效,然后在客户端分解菜单后,观察url,解析它以确定您在哪个页面上,然后将类应用于样式菜单元素。(海事组织:)
$(function(){
$("#menu a").on("click",function(){
var ths = $(this);
if($('#test').hasClass("selectedTab")){ths.removeClass("selectedTab").addClass("tab");}
else{ths.removeClass("tab").addClass("selectedTab");}
});
});
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");
})
});
$(document).on("click", "#message", function(event) {
$('.chat-type-msg').css('background-color','#FAFAFA');
$('.chat-type-msg').css('color','#535353');
});
.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;
}
jQuery(function(){
jQuery("#menu a").on("click",function(){
if($('#test').attr('class')=="selectedTab")
jQuery("#menu a").removeClass("selectedTab");
jQuery("#menu a").addClass("tab");
}
else{ jQuery(this).removeClass("tab");
jQuery(this).addClass("selectedTab");
}
});
});
<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>
$(function(){
$("#menu a").on("click",function(){
var ths = $(this);
if($('#test').hasClass("selectedTab")){ths.removeClass("selectedTab").addClass("tab");}
else{ths.removeClass("tab").addClass("selectedTab");}
});
});