试试这个:[有效]

null

let rankedNo1 = document.querySelector("#ranked_no1");
let rankedNo2 = document.querySelector("#ranked_no2");
let rankedNo3 = document.querySelector("#ranked_no3");
let rankedNo4 = document.querySelector("#ranked_no4");
let rankedNo5 = document.querySelector("#ranked_no5");
let rankedNo6 = document.querySelector("#ranked_no6");
let rankedNo7 = document.querySelector("#ranked_no7");
let rankedNo8 = document.querySelector("#ranked_no8");
let rankedNo9 = document.querySelector("#ranked_no9");
let rankedNo10 = document.querySelector("#ranked_no10");

let rankedNoArray = [rankedNo1, rankedNo2, rankedNo3, rankedNo4, rankedNo5, rankedNo6, rankedNo7, rankedNo8, rankedNo9, rankedNo10];

rankedNo1.addEventListener("click", function() {
  toggleHighlight(rankedNo1);
  event.preventDefault();
});
rankedNo2.addEventListener("click", function() {
  toggleHighlight(rankedNo2);
  event.preventDefault();
});
rankedNo3.addEventListener("click", function() {
  toggleHighlight(rankedNo3);
  event.preventDefault();
});
rankedNo4.addEventListener("click", function() {
  toggleHighlight(rankedNo4);
  event.preventDefault();
});
rankedNo5.addEventListener("click", function() {
  toggleHighlight(rankedNo5);
  event.preventDefault();
});
rankedNo6.addEventListener("click", function() {
  toggleHighlight(rankedNo6);
  event.preventDefault();
});
rankedNo7.addEventListener("click", function() {
  toggleHighlight(rankedNo7);
  event.preventDefault();
});
rankedNo8.addEventListener("click", function() {
  toggleHighlight(rankedNo8);
  event.preventDefault();
});
rankedNo9.addEventListener("click", function() {
  toggleHighlight(rankedNo9);
  event.preventDefault();
});
rankedNo10.addEventListener("click", function() {
  toggleHighlight(rankedNo10);
  event.preventDefault();
});

function toggleHighlight(r) {
  let highlighted = lastHighlighted();
  if (highlighted && highlighted.length) {
    for (let h of highlighted) {
    
      if (h == r) {
      
        r.firstElementChild.classList.remove("selected");
        
      } else {
        h.firstElementChild.classList.remove("selected");
        if (r.firstElementChild.classList.contains("selected")) {
          r.firstElementChild.classList.remove("selected");
        } else {
          r.firstElementChild.classList.add("selected");
        }
      }
      i+=1;
    }
  } else {
  r.firstElementChild.classList.add("selected");
  }
}

function lastHighlighted() {
  let highlightedNos = rankedNoArray.filter(x => x.firstElementChild.classList.contains("selected"));
  return highlightedNos;
}

#rank_flex_combo #ranked_nos, #rank_flex_combo, #ranked_no,
#ranked_no1, #ranked_no2, #ranked_no3, #ranked_no4, #ranked_no5,
#ranked_no6, #ranked_no7, #ranked_no8, #ranked_no9, #ranked_no10 { 
    display: flex;
    flex-direction: row;
    margin: 0em 0.5em;
}
#ranked_nos a,
#ranked_no1 a, #ranked_no2 a, #ranked_no3 a, #ranked_no4 a, #ranked_no5 a,
#ranked_no6 a, #ranked_no7 a, #ranked_no8 a, #ranked_no9 a, #ranked_no10 a {
    font-weight: bold;
    text-decoration: none;
    padding: 0.25em 0.5em;
    color: dodgerblue;
    background-color: lightcyan;
    border: 2px solid cyan;
    border-radius: 5px;
}
#ranked_nos .selected,
#ranked_no1 .selected, #ranked_no2 .selected, #ranked_no3 .selected, #ranked_no4 .selected, 
#ranked_no5 .selected, #ranked_no6 .selected, #ranked_no7 .selected, #ranked_no8 .selected, 
#ranked_no9 .selected, #ranked_no10 .selected {
    color: mediumpurple;
    background-color: lavender;
    border: 2px solid mediumpurple;
}
#ranked_no a { 
    font-weight: bold;
    text-decoration: none;
    padding: 0.25em 2em;
    color: dodgerblue;
    background-color: white;
    border: 2px solid cyan;
    border-radius: 5px;
}
#ranked_no1 a:hover, #ranked_no2 a:hover, #ranked_no3 a:hover, #ranked_no4 a:hover, #ranked_no5 a:hover, #ranked_no6 a:hover, #ranked_no7 a:hover, #ranked_no8 a:hover, #ranked_no9 a:hover, #ranked_no10 a:hover { 
    color: mediumpurple;
    background-color: lavender;
    border: 2px solid mediumpurple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rank_flex_combo">
        <div id="ranked_no">
            <a href="" >Rank No.</a>
        </div>
        <div id="ranked_no1">
            <a href="" class="selected">1</a>
        </div>
        <div id="ranked_no2">
            <a href="">2</a>
        </div>
        <div id="ranked_no3">
            <a href="">3</a>
        </div>
        <div id="ranked_no4">
            <a href="">4</a>
        </div>
        <div id="ranked_no5">
            <a href="">5</a>
        </div>
        <div id="ranked_no6">
            <a href="">6</a>
        </div>
        <div id="ranked_no7">
            <a href="">7</a>
        </div>
        <div id="ranked_no8">
            <a href="">8</a>
        </div>
        <div id="ranked_no9">
            <a href="">9</a>
        </div>
        <div id="ranked_no10">
            <a href="">10</a>
        </div>
    </div>

你只需要:

null

const rankFlexCombo = document.getElementById('rank_flex_combo')
  ,   rankedNo1     = document.querySelector('#rank_flex_combo > div#ranked_no1')
  ,   rankedNoAll   = document.querySelectorAll('#rank_flex_combo > div')
  ;
rankedNo1.classList.add('selected')
var OnSelect = rankedNo1
  ;
rankFlexCombo.onclick= e => 
  {
  if (!e.target.matches('#rank_flex_combo > div')) return
  let rDiv = (e.target.id==='ranked_no') ? rankedNo1 : e.target;
  rankedNoAll.forEach(d=>d.classList.remove('selected'))

  if (rDiv===OnSelect)
    {
    // rankedNo1.classList.add('selected')
    //  OnSelect = rankedNo1              //   for default selected
    OnSelect = null
    }
  else 
    {
    rDiv.classList.add('selected')
    OnSelect = rDiv
    } 
  }

#rank_flex_combo {
  display: flex;
  flex-direction: row;
}
#rank_flex_combo > div {
  font-weight: bold;
  padding: 0.25em 0.5em;
  color: dodgerblue;
  background-color: lightcyan;
  border: 2px solid cyan;
  border-radius: 5px;
  margin: 0em 0.5em;
  cursor: pointer;
  }
#rank_flex_combo > div:hover,
#rank_flex_combo > div.selected {
  color: mediumpurple;
  background-color: lavender;
  border: 2px solid mediumpurple;
  }

<div id="rank_flex_combo">
  <div id="ranked_no"> Rank No.  </div>
  <div id="ranked_no1"> 1  </div>
  <div id="ranked_no2"> 2 </div>
  <div id="ranked_no3"> 3 </div>
  <div id="ranked_no4"> 4 </div>
  <div id="ranked_no5"> 5 </div>
  <div id="ranked_no6"> 6 </div>
  <div id="ranked_no7"> 7 </div>
  <div id="ranked_no8"> 8 </div>
  <div id="ranked_no9"> 9 </div>
  <div id="ranked_no10"> 10 </div>
 </div>

首先，发生重定向是因为您使用了和href，而且Event.PreventDefault()；也不能工作，因为Event在您的函数范围内。 而且，你在那里做了一些无用的工作，这些工作可以被收紧到一个更好的方法。

所以我对您的代码做了一点修改，它看起来是这样的，具有相同的功能:

const rankedNo = document.querySelectorAll("div[id*='ranked_no'] > a");

rankedNo.forEach((el) => {
  el.addEventListener("click", function (event) {
    event.preventDefault();
    toggleHighlight(event.target);
  });
});

function toggleHighlight(r) {
  if (r.classList.contains("selected")) r.classList.remove("selected");
  else {
    rankedNo.forEach((el) => {
      el.classList.remove("selected");
    });

    r.classList.add("selected");
  }
}

最后的代码如下所示:

null

const rankedNo = document.querySelectorAll("div[id*='ranked_no'] > a");

rankedNo.forEach((el) => {
  el.addEventListener("click", function(event) {
    event.preventDefault();
    toggleHighlight(event.target);
  });
});

function toggleHighlight(r) {
  if (r.classList.contains("selected")) r.classList.remove("selected");
  else {
    rankedNo.forEach((el) => {
      el.classList.remove("selected");
    });

    r.classList.add("selected");
  }
}

#rank_flex_combo #ranked_nos,
#rank_flex_combo,
#ranked_no,
#ranked_no1,
#ranked_no2,
#ranked_no3,
#ranked_no4,
#ranked_no5,
#ranked_no6,
#ranked_no7,
#ranked_no8,
#ranked_no9,
#ranked_no10 {
  display: flex;
  flex-direction: row;
  margin: 0em 0.5em;
}

#ranked_nos a,
#ranked_no1 a,
#ranked_no2 a,
#ranked_no3 a,
#ranked_no4 a,
#ranked_no5 a,
#ranked_no6 a,
#ranked_no7 a,
#ranked_no8 a,
#ranked_no9 a,
#ranked_no10 a {
  font-weight: bold;
  text-decoration: none;
  padding: 0.25em 0.5em;
  color: dodgerblue;
  background-color: lightcyan;
  border: 2px solid cyan;
  border-radius: 5px;
}

#ranked_nos .selected,
#ranked_no1 .selected,
#ranked_no2 .selected,
#ranked_no3 .selected,
#ranked_no4 .selected,
#ranked_no5 .selected,
#ranked_no6 .selected,
#ranked_no7 .selected,
#ranked_no8 .selected,
#ranked_no9 .selected,
#ranked_no10 .selected {
  color: mediumpurple;
  background-color: lavender;
  border: 2px solid mediumpurple;
}

#ranked_no a {
  font-weight: bold;
  text-decoration: none;
  padding: 0.25em 2em;
  color: dodgerblue;
  background-color: white;
  border: 2px solid cyan;
  border-radius: 5px;
}

#ranked_no1 a:hover,
#ranked_no2 a:hover,
#ranked_no3 a:hover,
#ranked_no4 a:hover,
#ranked_no5 a:hover,
#ranked_no6 a:hover,
#ranked_no7 a:hover,
#ranked_no8 a:hover,
#ranked_no9 a:hover,
#ranked_no10 a:hover {
  color: mediumpurple;
  background-color: lavender;
  border: 2px solid mediumpurple;
}

<div id="rank_flex_combo">
  <div id="ranked_no">
    <a href="">Rank No.</a>
  </div>
  <div id="ranked_no1">
    <a href="" class="selected">1</a>
  </div>
  <div id="ranked_no2">
    <a href="">2</a>
  </div>
  <div id="ranked_no3">
    <a href="">3</a>
  </div>
  <div id="ranked_no4">
    <a href="">4</a>
  </div>
  <div id="ranked_no5">
    <a href="">5</a>
  </div>
  <div id="ranked_no6">
    <a href="">6</a>
  </div>
  <div id="ranked_no7">
    <a href="">7</a>
  </div>
  <div id="ranked_no8">
    <a href="">8</a>
  </div>
  <div id="ranked_no9">
    <a href="">9</a>
  </div>
  <div id="ranked_no10">
    <a href="">10</a>
  </div>
</div>