Question

我正在使用Ant设计选项卡，并且我想仅使用CSS来更改标题，如下所示。

Answer 1

var menuItems = $('.main-navigation li');

menuItems.on("click", function(event) {
    
  menuItems.removeClass("active");
  
  $(this).addClass("active");
  
  $(".main-content").css({
    "background": $(this).data("bg-color")
  });
  
  event.preventDefault();
});

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Cabin);
* {
  box-sizing: border-box;
}

body {
  padding: 1rem 3rem;
  font-family: 'Cabin', sans-serif;
  line-height: 1.4;
  min-width: 925px;
}

a {
  text-decoration: none;
}

.main-navigation {
  overflow: hidden;
  position: relative;
  padding: 0 0 0 1rem;
  /*  &::after {
      content: "";
      position: absolute;
      bottom: 16px;
      left: 0;
      width: 798px;
      height: 12px;
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
      z-index: 5;
    }*/
}
.main-navigation ul {
  list-style: none;
  padding: 0;
}
.main-navigation li {
  float: left;
  width: 12rem;
  height: 5rem;
  margin: 0 0 0 -1rem;
  position: relative;
}
.main-navigation li.active {
  z-index: 6;
}
.main-navigation a {
  position: relative;
  display: inline-block;
  color: white;
  width: 100%;
  height: 100%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 1.4rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.main-navigation svg {
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.main-navigation span {
  position: relative;
  padding: 1rem 0 0 3.3rem;
  z-index: 2;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.main-navigation .tab-1 {
  z-index: 4;
}
.main-navigation .tab-1 svg {
  fill: url(#tab-1-bg);
}
.main-navigation .tab-2 {
  z-index: 3;
}
.main-navigation .tab-2 svg {
  fill: url(#tab-2-bg);
}
.main-navigation .tab-3 {
  z-index: 2;
}
.main-navigation .tab-3 svg {
  fill: url(#tab-3-bg);
}
.main-navigation .tab-4 {
  z-index: 1;
}
.main-navigation .tab-4 svg {
  fill: url(#tab-4-bg);
}

.main-content {
  position: relative;
  z-index: 10;
  background: #76a0c0;
  margin: -1.6rem 0 0 0;
  padding: 3rem;
  border-radius: 15px;
  border-top-left-radius: 0;
}

.article {
  background: white;
  padding: 5rem;
  border-radius: 8px;
}
.article h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  color: #76a0c0;
  margin: 0 0 0.5rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TAB TEMPLATE -->
<svg height="0" width="0" style="position: absolute; margin-left: -100%;">
  
  <defs>
    
    <filter id='shadow'>
      <feComponentTransfer in="SourceGraphic">
        <feFuncR type="discrete" tableValues="0"/>
        <feFuncG type="discrete" tableValues="0"/>
        <feFuncB type="discrete" tableValues="0"/>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="1"/>
       <feComponentTransfer><feFuncA type="linear" slope="0.2"/></feComponentTransfer>
      <feOffset dx="5" dy="1" result="shadow"/>
      <feComposite in="SourceGraphic" />
    </filter>
        
    <linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-2-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(149, 190, 233, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(112, 153, 213, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-3-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(61, 149, 218, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(43, 130, 197, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-4-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(72, 204, 243, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(71, 194, 243, 1.0);" />
    </linearGradient>
      
  </defs>
  
  <path id="tab-shape" class="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486
			z">
  
</svg>

<nav role="navigation" class="main-navigation">
  <ul>
    <li class="tab-1 active" data-bg-color="rgba(118, 160, 192, 1.0)">
      <a href="#home">
        <span>Home</span>
        <svg viewBox="0 0 122 40">
           <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-2" data-bg-color="rgba(112, 153, 213, 1.0)">
      <a href="#about">
        <span>About</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-3" data-bg-color="rgba(43, 130, 197, 1.0)">
      <a href="#clients">
        <span>Clients</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-4" data-bg-color="rgba(71, 194, 243, 1.0)">
      <a href="#contact">
        <span>Contact</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
  </ul>
</nav>

<div class="main-content">
  <article class="article">
    <h2>An Article Right Here, Boss.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa totam cumque ad repellendus ab ea repellat aperiam accusantium labore officia est culpa fugiat eaque magnam a. Labore molestias ea at maiores inventore veritatis cupiditate cum doloribus quisquam eum et asperiores!</p>
  </article>
</div>

样式标签蚂蚁设计

1 个答案: