Question

我尝试更改左侧导航栏中的标签颜色，以便在其被遮挡时更改颜色，并在选择时保持该颜色。我是jquery和css的超级新手，所以任何帮助都会受到赞赏！

以下是代码：

<script src="https://use.fontawesome.com/b36d34b486.js"></script>
<script type="text/javascript">
var $everything = $("#full-height-container").contents();
var leftnavcurrent = sessionStorage.getItem('leftnavcurrent');
var leftnavhidden;
$everything.find("#splitter-sidebar").css('background','#FFF');
$everything.find("#splitter-sidebar").css('overflow-x','hidden');  
$everything.find("#splitter-sidebar").css('overflow-y','hidden'); 
$(document).ready(function(){
$everything.find(".vsplitbar").css('visibility','hidden'); 
});

$(document).ready(function(){
if(!leftnavcurrent){
$everything.find("#splitter-sidebar").css('width','210px');
}else{
$("#splitter-sidebar").css('width','53px');
$("#left-sidebar2").css('left','-157px');
$("#left-sidebar2").css('position','relative');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 50 ]);
$("#showhidebutton").html('<a href="#" style="text-decoration:none;"     onclick="showhideleftnav()"><i class="fa fa-angle-right" aria-hidden="true"     style="font-size:20px; font-weight:bold;"></i></a>');
$(".lnhover").css('color','#FFF');
}
$(".lnhover").hover(function(){
    $(this).parents(".lnbuttons").css('border-right','5px solid #5382a1');
    $(this).css('color','#3572b0');
    }, function(){
    $(this).parents(".lnbuttons").css('border-right','none');
    $(this).css('color','#333');
    });
}); 

function switchln(){
$("#left-sidebar2").css('visibility','hidden');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 300 ]);
$("#old_ln").css('visibility','visible');
$everything.find("#splitter-sidebar").css('overflow-y','auto'); 
}

function switchlnback(){
$("#old_ln").css('visibility','hidden');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 210 ]);
$("#left-sidebar2").css('visibility','visible');
$everything.find("#splitter-sidebar").css('overflow-y','hidden'); 
}

function showhideleftnav(){
if(!leftnavhidden){
$("#splitter-sidebar").css('width','53px');
$("#left-sidebar2").css('left','-157px');
$("#left-sidebar2").css('position','relative');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 50 ]);
$("#showhidebutton").html('<a href="#" style="text-decoration:none;"     onclick="showhideleftnav()"><i class="fa fa-angle-right" aria-hidden="true"     style="font-size:20px; font-weight:bold;"></i></a>');
$(".lnhover").css('color','#FFF');
leftnavhidden=1;
sessionStorage.setItem('leftnavcurrent', '1');
}else{
$("#splitter-sidebar").css('width','210px');
$("#left-sidebar2").css('left','0px');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 210 ]);
$("#showhidebutton").html('<a href="#" style="text-decoration:none;"     onclick="showhideleftnav()"><i class="fa fa-angle-left" aria-hidden="true"     style="font-size:20px; font-weight:bold;"></i></a>');
$(".lnhover").css('color','');
leftnavhidden=null;
sessionStorage.removeItem('leftnavcurrent');
}
}
</script>

<div id="left-sidebar2" style="width:200px; float:left; margin-right:5px; margin-top:0px;"><div style="border-right:1px solid #e3e3e3;"><ul style="list-style: none; padding-left:0px;"><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Procedures" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Procedures (SOPs)</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Reference" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Reference</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Troubleshooting" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Troubleshooting</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Training" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Training</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="#" onclick="switchln()" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Page Tree</a>

</li></ul></div><div id="showhidebutton" style="border-right:.5px solid #e3e3e3; border-left:.5px solid #e3e3e3; border-bottom:.5px solid #e3e3e3; border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding-left:5px; padding-right:5px; margin-bottom:5px; width:30px; position:relative; left:158px; text-align:center; display:table-cell;background:#f2f2f2;"><a href="#" style="text-decoration:none;" onclick="showhideleftnav()"><i class="fa fa-angle-left" aria-hidden="true" style="font-size:20px; font-weight:bold;"></i></a></div></div>

<div id="old_ln" style="width:295px; float:left; border-right:1px solid     #e3e3e3; border-bottom: 1px solid #e3e3e3; margin-right:5px; margin-top:0px; visibility:hidden; position: absolute; top:-20px;">

返回标准导航菜单enter code here

Answer 1

Previously answered here

我认为这就是你需要的。不可能让类继续使用CSS，但你可以使用jquery在onmouseout上添加一个“hovered”类

Answer 2

我假设您的左侧导航是left-sidebar2？如果是这样，那么下面的代码就可以了。只需在hover或click上的左侧导航栏中添加一个CSS类，并通过CSS设置导航样式：

CSS

#left-sidebar2 {
  /*your default style*/
}
#left-sidebar2.is-hovered {
  color: /*color when hovered*/
}
#left-sidebar2.is-selected {
  color: /*color when selected*/
}

的JavaScript

//first add a reference to your CSS file
<link rel="stylesheet" type="text/css" href="pathToYourCSSFile/fileName.css">
//add the eventListener when DOM is ready
$(document).ready(function(){
  //add class "is-hovered" on mouseover and remove it on mouseout
  $(#left-sidebar2).hover (function(){
    $(this).toggleClass ("is-hovered");
  });
  //add or remove class "is-selected" on click
  $(#left-sidebar2).click (function(){
    $(this).toggleClass ("is-selected");
  });
});

使用jquery和css

2 个答案: