Question

我想更改所选菜单链接的颜色。选择菜单后，用户将被重定向到该URL，我希望该链接更改颜色。单击链接时页面将重新加载

＆＃13;

$(document).ready(function() {
  $('.entry-link > ul li').click(function(e) {
    $('.entry-link > ul li').removeClass('selected');
    $(this).addClass('selected');
  });
});

＆＃13;

.entry-links > ul li.selected {
  background-color: green;
  font-weight: 800;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="entry-links">
  <ul>
    <li class="">
      <a href="#~/" title="För elever">För elever</a>
    </li>
    <li>
      <a href="#/for-skolpersonal/" title="För skolpersonal">För skolpersonal</a>
    </li>
    <li>
      <a href="#/ungdom-och-elevdatabas/" title="Ungdom och elevdatabas">Ungdom och elevdatabas</a>
    </li>
  </ul>
</nav>

＆＃13;

我没有收到错误但没有发生任何事情

Answer 1

您将条目链接放在某些地方，将条目链接放在另一个地方

＆＃13;

$(document).ready(function() {
  $('.entry-links ul li').click(function(e) {
    $('.entry-links ul li').removeClass('selected');
    $(this).addClass('selected');
  });
});

＆＃13;

.entry-links ul .selected {
  background-color: green;
  font-weight: 800;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav class="entry-links">
  <ul>
    <li class="">
      <a href="#~/" title="För elever">För elever</a>
    </li>
    <li>
      <a href="#/for-skolpersonal/" title="För skolpersonal">För skolpersonal</a>
    </li>
    <li>
      <a href="#/ungdom-och-elevdatabas/" title="Ungdom och elevdatabas">Ungdom och elevdatabas</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

试

$(document).ready(function (e) {

      $('.entry-links  a').click(function (e) {
          e.preventDefault();
          $('.entry-links > ul li').removeClass('selected');
          $(this).parent().addClass('selected');             


      });
  });

小提琴https://jsfiddle.net/t64d1obe/18/

Answer 3

使用window.localStorage或window.sessionStorage来存储链接的颜色并从存储的变量中设置颜色

Answer 4

单击该链接后，您将重定向到新页面。因此，在http请求要求新页面之前，您的javascript告诉页面更改外观。

我认为您要做的是标记当前选定的页面。您可以在html中将类selected添加到当前页面菜单中，如：

＆＃13;

body {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  padding: 1em;
  font-size: 1.2em;
}
li.selected {
  background-color: black;
  color: white;
}
li.selected a {
  color: white;
}
lo.selected a:visited {
  color: lightblue;
}

＆＃13;

<nav class="entry-links">
  <ul>
    <li class="selected">
      <a href="" title="För elever">För elever</a>
    </li>
    <li>
      <a href="" title="För skolpersonal">För skolpersonal</a>
    </li>
    <li>
      <a href="" title="Ungdom och elevdatabas">Ungdom och elevdatabas</a>
    </li>
  </ul>
</nav>

＆＃13;

或者您可以使用javascript来检测您当前所在的页面，并将选定的类添加到正确的元素中。

＆＃13;

$(document).ready(function() {
  var hrefString = document.location.href ? document.location.href : document.location;
  console.log(hrefString);

  var aNodes = $('.menu').find('a');

  aNodes.each(function(index) {
    if ($(aNodes[index]).attr('href') == hrefString) {
      $(aNodes[index]).parent().addClass("active");
    }
  });
});

＆＃13;

.active {
  background-color: black;
  color: white;
}
.active a {
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="http://stacksnippets.net/js">Link to current page</a>
  </li>
  <li><a href="_blank">Other page</a>
  </li>
  <li><a href="_blank">other link</a>
  </li>
  <li><a href="_blank">etc</a>
  </li>
</ul>

＆＃13;

（或者不建议使用javascript）
在每个页面添加一个javascript，并将选定的类添加到正确的菜单链接。只是硬编码的javascript样式更改（再次不推荐）

Answer 5

好的，首先关闭所有[$（'entry-link＆gt; ul li'）]这是无效的选择器。你必须使用css标识符。喜欢[for class（。）]等.. 所以使用选择器

$('.entry-link > ul li');

（。）很重要

并测试我发布的演示。它可能很容易出售问题[使用悬停]。

visit the DEMO

选中时更改菜单链接上的颜色

5 个答案: