Question

我为自己的网站创建了一个本地导航菜单。它包含2个li元素，如图Once you click on the item a black border should be displayed around the href and the name Item should be changed to white with black background.

所示

$(document).ready(function() {
  $("li").addClass("liNavA");
  $("a").addClass("active");
});

div.figure {
  background-color: black;
  border-radius: 50%;
  width: auto;
}

li.liNav {
  list-style-type: none;
  display: inline-block;
  margin-top: 18px;
  margin-left: 4px;
  text-align: left;
  border: solid 12px black;
  border-radius: 24px;
  background-color: black
}

li.liNavA {
  list-style-type: none;
  display: inline-block;
  margin-top: 18px;
  margin-left: 4px;
  text-align: left;
  border: solid 12px white;
  border-radius: 24px;
  color: white;
  background-color: white;
}

a.active {
  color: white;
  text-decoration: none;
}

a.pasive {
  color: black;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
  <ul class="localNav">
    <li class="liNav" id="exploreTitle"><a class="active" id="titleLi" id="exploreTitle">Explore</a></li>
    <li class="liNavA"><a class="pasive"  href="#">Who already joined</a></li>
    <li class="liNav" ><a class="active"  href="#">Why develop for us </a></li>
  </ul>
</div>

Answer 1

<style type="text/css">
    div.figure {
      background-color: black;
      border-radius: 50%;
      width: auto;
    }

    li.liNav {
      list-style-type: none;
      display: inline-block;
      margin-top: 18px;
      margin-left: 4px;
      text-align: left;
      border: solid 2px black;
      padding: 5px;
      border-radius: 24px;
      background-color: #FFFFFF
    }

    li.liNavA {
      list-style-type: none;
      display: inline-block;
      margin-top: 18px;
      margin-left: 4px;
      text-align: left;
      border: solid 2px white;
      padding: 5px;
      border-radius: 24px;
      color: white;
      background-color: #000000;
    }

    li.liNavA a {
      color: white;
    }

    a.active {
      text-decoration: none;
    }

    a.pasive {
      text-decoration: none;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
  <ul class="localNav">
    <li class="liNav" id="exploreTitle"><a class="active" href="#">Explore</a></li>
    <li class="liNav" id="liRight"><a class="pasive" href="#">Who already joined</a></li>
    <li class="liNav" id="liLeft"><a class="active" href="#">Why develop for Hue</a></li>
  </ul>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        /**
         * add event listner for every list-item
         */
        $("#exploreTitle").click(function(){
            $("#exploreTitle").attr('class', 'liNavA');

            $("#liRight").attr('class', 'liNav');
            $("#liLeft").attr('class', 'liNav');
        })

        $("#liRight").click(function(){
            $("#liRight").attr('class', 'liNavA');

            $("#exploreTitle").attr('class', 'liNav');
            $("#liLeft").attr('class', 'liNav');
        })
        $("#liLeft").click(function(){
            $("#liLeft").attr('class', 'liNavA');

            $("#liRight").attr('class', 'liNav');
            $("#exploreTitle").attr('class', 'liNav');
        })
    });
</script>

点击后更改li元素的样式

1 个答案: