Question

I want to show a triangle on the selected tab. My problem is that it won't go away. My triangle is now .png, i prefer svg. Can't find the right help, i've tried for hours.

$(function() {
  $('nav a').on('click', function() {
    show_content($(this).index());
  });

  show_content(0);

  function show_content(index) {
    // Make the content visible
    $('.tabs .content.visible').removeClass('visible');
    $('.tabs .content:nth-of-type(' + (index + 1) + ')').addClass('visible');

    // Set the tab to selected
    $('nav a.selected').removeClass('selected');
    $('nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
    // Add arrow
    $('nav a.selected').append("<div class='triangle-container'><img src='http://rebornshare.com/right-arrow-red.png'></div>");
    // How to remove the arrow and only show it on the selected tab?
  }
});

.container {
  margin: 0px auto;
  position: relative;
  background: #EFF1E4;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 1140px;
  display: flex;
  align-items: stretch;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: top;
}

.col:first-child {
  background: #AD9897;
}

nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  /*align-items: stretch;*/
  /*background: #AD9897;*/
  color: #6C5D5D;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
  width: 150px;
}

nav a {
  position: relative;
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

nav a:hover,
nav a.selected {
  background: #6C5D5D;
  color: #AD9897;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}


/* tabs triangle */

.triangle-container {
  position: absolute !important;
  z-index: 10;
  top: 0;
  left: 99.6%;
  width: 30px !important;
  background: transparent !important;
  height: 100%;
}

.triangle-container img {
  position: absolute;
  height: 100%;
  left: 0;
  width: 30px;
}

.tabs .content {
  padding: 20px 20px 20px 60px;
  position: relative;
  color: #6C5D5D;
  transition: opacity 0.1s linear 0s;
  display: none;
}

.tabs .content.visible {
  display: block;
}

.tabs .content p {
  padding-bottom: 2px;
}

.tabs .content p:last-of-type {
  padding-bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tabs-nav col">
    <nav>
      <a>Tab #1 is very long, maybe too long, no it's not. Just to see the triangle responsive height</a>
      <a>Tab #2</a>
      <a>Tab #3</a>
    </nav>
  </div>
  <div class="tabs tabs-content col">
    <div class="content">
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
      <p>Content #1</p>
    </div>
    <div class="content">
      <p>Content #2</p>
    </div>
    <div class="content">
      <p>Content #3</p>
    </div>
  </div>
</div>

Codepen

Answer 1

只需在{% my_count %}上删除它，然后再次创建它：

click

＆＃13;

$('.triangle-container').remove();

＆＃13;

$(function() {
  $('nav a').on('click', function() {
  $('.triangle-container').remove();
    show_content($(this).index());
  });

  show_content(0);

  function show_content(index) {
    $('.tabs .content.visible').removeClass('visible');
    $('.tabs .content:nth-of-type(' + (index + 1) + ')').addClass('visible');

    $('nav a.selected').removeClass('selected');
    $('nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
    $('nav a.selected').append("<div class='triangle-container'><img src='http://rebornshare.com/right-arrow-red.png'></div>");
  }
});

＆＃13;

.container {
  margin: 0px auto;
  position: relative;
  background: #EFF1E4;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 1140px;
  display: flex;
  align-items: stretch;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: top;
}

.col:first-child {
  background: #AD9897;
}

nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  /*align-items: stretch;*/
  /*background: #AD9897;*/
  color: #6C5D5D;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
  width: 150px;
}

nav a {
  position: relative;
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

nav a:hover,
nav a.selected {
  background: #6C5D5D;
  color: #AD9897;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}


/* tabs triangle */

.triangle-container {
  position: absolute !important;
  z-index: 10;
  top: 0;
  left: 99.6%;
  width: 30px !important;
  background: transparent !important;
  height: 100%;
}

.triangle-container img {
  position: absolute;
  height: 100%;
  left: 0;
  width: 30px;
}

.tabs .content {
  padding: 20px 20px 20px 60px;
  position: relative;
  color: #6C5D5D;
  transition: opacity 0.1s linear 0s;
  display: none;
}

.tabs .content.visible {
  display: block;
}

.tabs .content p {
  padding-bottom: 2px;
}

.tabs .content p:last-of-type {
  padding-bottom: 0px;
}

＆＃13;

Answer 2

你可以尝试

如果您有triangle-container课程，请将其删除。

在函数启动后添加$('.triangle-container').remove()行，如下所示

function show_content(index) {
 $('.triangle-container').remove()
// Make the content visible

Add arrow to selected tab and remove from unselected

2 个答案: