用于替换列表的按钮

时间：2017-12-07 17:51:40

标签： javascript

我在点击按钮时尝试将2017事件替换为每个不同部分下的2018事件，反之亦然，以便一次只显示一个列表每个事件。我知道有些事情是对的，但我无法弄清楚。关于如何使这些按钮工作的任何建议，请？

＆＃13;
＆＃13; 
$(document).ready(function() {
  var v = false;
  $("button#2018b").click(function() {
    if (v == false) {
      v = true;
    }
  }); //end button
  $("button#2017b").click(function() {
    if (v == true) {
      v = false;
    }
  }); //end button
}); //end document ready

//$("2017".replacewith("<li class='2018'/li>"); 
//$("2018".replacewith("<li class='2017'/li>");
＆＃13; 
.panel {
  display: none;
}

ul {
  list-style-type: none;
}

button {
  margin-left: 180px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Fox Valley Runners Club</h1>
</div>

<ul>
  <li class="nav"> <button id="2018B">Future Events - 2018</button> </li>
  <li class="nav"> <button id="2017B">Current Events - 2017</button> </li>

</ul>

<div id="main"></div>

<div id="pics">
  <div class="race_box">
    <img src="images/run1.jpg" id="5kpic" /><br />

    <figcaption>5k/10k Events</figcaption>

    <div class="races" id="5k">
      <h3>5k/10 Events</h3>
      <ul>
        <li class="2017">Mini Sprint</li>
        <li class="2017">Iron Horse</li>
        <li class="2017">Twilight Trail</li>

      </ul>
    </div>
    <div class="races" id="5K">
      <h3>5K / 10K Events</h3>
      <ul>
        <li class="2018">Snowball Sprint</br> 1/14/18 </br>Mosquito Hill </br>New London</li>
        <li class="2018">Winter Warrior </br>2/06/18 </br>Bay Beach</br> Green Bay</li>
        <li class="2018">Big Chill Run </br>2/24/18</br> Mid Valley Golf Course </br>De Pere</li>
      </ul>
    </div>

  </div>

  <div class="race_box">
    <img src="images/run2.jpg" id="halfpic" /></button><br />
    <figcaption>Half Marathon Events</figcaption>

    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li class="2017">Fox River Marathon</li>
        <li class="2017">N.E.W. Half Marathon</li>
        <li class="2017">Winnebago Run</li>


      </ul>
    </div>
    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li class="2018">Frosty Indoor Marathon</br> 1/15/18 </br>TryIt Ice Arena</br> Neenah</li>
        <li class="2018">Valentine Run </br>2/12/18 </br>Green Isle Park</br> De Pere</li>
        <li class="2018">Snowball Marathon </br>3/03/18 </br>Menominee Park </br>Oshkosh</li>
      </ul>
    </div>
  </div>

  <div class="race_box">
    <img src="images/run3.jpg" id="fullpic" /><br />
    <figcaption>Full Marathon Events</figcaption>

    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li class="2017">Cheesehead Marathon</li>
        <li class="2017">Chain O'Lakes Marathon</li>
        <li class="2017">Fox Cities Marathon</li>
      </ul>
    </div>

    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li class="2018">Trailbreaker Marathon</br> 4/02/18 </br>Leach Amphitheatre</br> Oshkosh</li>
        <li class="2018">Jailbreak Marathon </br> 4/16/18 </br>Menominee Park </br>Oshkosh</li>
        <li class="2018">Cellcom Marathon </br>5/20/18</br> Lombardi Atrium</br> Green Bay </li>
      </ul>
    </div>

  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

<强>备注

将<div>设置为对应 <button>。 

<button id="show-event">Event</button>
<div id="event"></div>

隐藏所有div但仅显示一个。在每个按钮上单击隐藏当前 div并显示选中一个。

示例 

var events = document.querySelectorAll("div[id^=events-]");
var btnEvents = document.querySelectorAll("button[id^=show-events-]");
var currBtn = document.querySelector("button[id^=show-events-][class=active]");
var idCurrEvent = currBtn.getAttribute("id").replace("show-", "");
var currEvent = document.getElementById(idCurrEvent);
currEvent.classList.add("show");

btnEvents.forEach(btn => {
  btn.addEventListener("click", function() {
    currBtn.classList.remove("active");
    this.classList.add("active");
    currBtn = this;
    currEvent.classList.remove("show");
    currEvent = document.getElementById(this.id.replace("show-", ""));
    currEvent.classList.add("show");
  });
});
button {
  outline: none;
}

.active {
  border: 1px solid orange;
}

div[id^=events-] {
  display: none;
}

.show {
  display: block !important;
}
<h1>Events</h1>

<button id="show-events-2016">2016</button>
<button id="show-events-2017" class="active">2017</button>
<button id="show-events-2018">2018</button>

<div id="events-2016">
  <ul>
    <li>Event 1 2016</li>
    <li>Event 2 2016</li>
    <li>Event 3 2016</li>
  </ul>
</div>


<div id="events-2017">
  <ul>
    <li>Event 1 2017</li>
    <li>Event 2 2017</li>
    <li>Event 3 2017</li>
  </ul>
</div>

<div id="events-2018">
  <ul>
    <li>Event 1 2018</li>
    <li>Event 2 2018</li>
    <li>Event 3 2018</li>
  </ul>
</div>

答案 1 :(得分：0)

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>FV Runners</title>
  <meta charset="UTF-8">
  <link href="styles/normalize.css" rel="stylesheet" />
  <link href="styles/my_style.css" rel="stylesheet" />
  <style>
    .panel {
      display: none;
    }
    
    ul {
      list-style-type: none;
    }
    
    button {
      margin-left: 180px;
    }
  </style>
</head>

<body>
  <div id="header">
    <h1>Fox Valley Runners Club</h1>
  </div>

  <ul>
    <li class="nav"> <button id="2018B">Future Events - 2018</button> </li>
    <li class="nav"> <button id="2017B">Current Events - 2017</button> </li>

  </ul>

  <div id="main"></div>

  <div id="pics">
    <div class="race_box">
      <img src="images/run1.jpg" id="5kpic" /><br />

      <figcaption>5k/10k Events</figcaption>

      <div class="races" id="5k">
        <h3>5k/10 Events</h3>
        <ul>
          <li class="2017">Mini Sprint</li>
          <li class="2017">Iron Horse</li>
          <li class="2017">Twilight Trail</li>

        </ul>
      </div>
      <div class="races" id="5K">
        <h3>5K / 10K Events</h3>
        <ul>
          <li class="2018">Snowball Sprint</br> 1/14/18 </br>Mosquito Hill </br>New London</li>
          <li class="2018">Winter Warrior </br>2/06/18 </br>Bay Beach</br> Green Bay</li>
          <li class="2018">Big Chill Run </br>2/24/18</br> Mid Valley Golf Course </br>De Pere</li>
        </ul>
      </div>

    </div>

    <div class="race_box">
      <img src="images/run2.jpg" id="halfpic" /></button><br />
      <figcaption>Half Marathon Events</figcaption>

      <div class="races" id="half">
        <h3>Half Marathon Events</h3>
        <ul>
          <li class="2017">Fox River Marathon</li>
          <li class="2017">N.E.W. Half Marathon</li>
          <li class="2017">Winnebago Run</li>


        </ul>
      </div>
      <div class="races" id="half">
        <h3>Half Marathon Events</h3>
        <ul>
          <li class="2018">Frosty Indoor Marathon</br> 1/15/18 </br>TryIt Ice Arena</br> Neenah</li>
          <li class="2018">Valentine Run </br>2/12/18 </br>Green Isle Park</br> De Pere</li>
          <li class="2018">Snowball Marathon </br>3/03/18 </br>Menominee Park </br>Oshkosh</li>
        </ul>
      </div>
    </div>

    <div class="race_box">
      <img src="images/run3.jpg" id="fullpic" /><br />
      <figcaption>Full Marathon Events</figcaption>

      <div class="races" id="full">
        <h3>Full Marathon Events</h3>
        <ul>
          <li class="2017">Cheesehead Marathon</li>
          <li class="2017">Chain O'Lakes Marathon</li>
          <li class="2017">Fox Cities Marathon</li>
        </ul>
      </div>

      <div class="races" id="full">
        <h3>Full Marathon Events</h3>
        <ul>
          <li class="2018">Trailbreaker Marathon</br> 4/02/18 </br>Leach Amphitheatre</br> Oshkosh</li>
          <li class="2018">Jailbreak Marathon </br> 4/16/18 </br>Menominee Park </br>Oshkosh</li>
          <li class="2018">Cellcom Marathon </br>5/20/18</br> Lombardi Atrium</br> Green Bay </li>
        </ul>
      </div>

    </div>

  </div>

  <script>
    $(document).ready(function() {
      var v = false;
      $("button#2018B").click(function() {
        $(".2017").hide();        
        $(".2018").show();
      }); //end button
      $("button#2017B").click(function() {
        $(".2018").hide();        
        $(".2017").show();
      }); //end button
    }); //end document ready

    
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

您可以使用jquery show和hide函数。你也错误地点击了点击事件中的按钮ID（它们区分大小写）

相关问题
最新问题