1

我有全局 css 文件包含以下代码

#menu_left
 {
  color: #004080;
  width: 225px;
  margin: 0px;
  border-style: solid solid none solid;
  border-color: #ffffff;
  border-size: 1px;
  border-width: 1px;
 }

#menu_left li a
{
 color: #222222;
 height: 26px;
 voice-family: inherit;
 text-decoration: none;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}

#menu_left li a:link, #menu_left li a:visited
{
 color: #222222;
 display: block;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}
#menu_left li a:hover
{
 color: #222222;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 font-weight:normal;
 background-color:#B9C4CA;
 font-size:12px;
 font-family:tahoma;
}

到目前为止，我将#menuleft id 分配给了我的 div，其中包含 li's(list tag) 并且每个 li 标签都有一个锚标签。我所有的 li 都将作为列表出现在左侧面板中。一旦我选择了任何 li，它应该显示一些 css 样式，而其他应该具有上述 css。

我编写了一个 js 函数来切换这些 css 更改的选择和取消选择。

但是如果执行以下操作，则悬停 css 不适用...

function setSelected(selID)//selId is ID for anchor tag in selected li item
{
 //contains all list of anchor tag id's
  var anchorID=['usersAnchor','securityAnchor','passPolAnchor','activeSessAnchor'];
  for(i=0;i<anchorID.length;i++)
   {
     if(selID!=anchorID[i])
     {
        var div = document.getElementById(anchorID[i]);
        div.style.fontWeight = 'bold';
        div.setAttribute('style','color: #222222;height: 26px;voice-family: inherit;text-decoration: none;border-bottom: solid 1px #ffffff;background-color:#D3D7D9;font-size:12px;font-family:tahoma;');
        }
     else

     {
         var div = document.getElementById(selID);
         div.style.fontWeight = 'bold';
         div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');
        }
   }

任何人都可以帮助我如何获得所有css属性，使其适用于选择悬停和正常同时切换选择？

问候， 卡梅什

4

4 回答 4

1

在您setSelected的设置中，您正在覆盖粗体样式。也就是说，您可以更轻松地处理 css。

与其在节点级别设置 css，为什么不使用 css 的发明目的？

您可以设置 aaselected类，然后在您的代码中切换className

.selected {
   color: #222222;
   height: 26px;
   voice-family: inherit;
   text-decoration: none;
   border-bottom: solid 1px #ffffff;
   background-color:#D3D7D9;
   font-size:12px;
   font-family:tahoma;
}

一个简单的 JS 函数负责类交换：

function setSelected(selID) {
   var anchorIDs = {
       'usersAnchor': true
       'securityAnchor': true
       'passPolAnchor': true
       'activeSessAnchor': true
   };
   var div = document.getElementById(selID),
   className = div.className;

   if (anchorIDs[selID] === true) {
       div.className = className.replace(/\s+(selected)/, " selected");
   } else {
       div.className = className.replace(/\s+(selected)/, "");
   }
}
于 2012-07-25T11:42:53.920 回答
1

使用 jQuery 让您的工作更简单！

而不是使用这个：

div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

当你使用 jQuery 时，它会很容易并且跨浏览器兼容。你可以用这种方式做同样的事情：

$('div').attr('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

或者

$('div').css({
    'color': '#FFFFFF', 
    'display': 'block', 
    'padding': '8px 0 0 10px', 
    'border-bottom': 'solid 1px #ffffff', 
    'background-color': '#718296', 
    'font-size': '12px', 
    'font-family': 'tahoma'
});

.css可以使用 jQuery的属性！:)

于 2012-07-25T10:07:41.157 回答
0

请看这个小提琴。这是你想要的效果吗？它使用 jQuery 来简化 Javascript，但通过切换 CSS 类而不是使用 jQuery 的.css()方法来切换样式。这有两个原因……第一个是您应该按目的分隔代码。HTML 应该是内容，CSS 应该是样式，而 Javascript 应该仅用于逻辑（如果可能，您不应该在 Javascript 中放置内容或样式）。第二个原因是使用 Javascript 切换类比切换样式要容易得多。

于 2012-07-25T15:45:23.413 回答
0

我推荐使用.cssjQuery API。

于 2012-07-25T10:01:03.823 回答