Question

当我看一下代码的这一部分时，也许有一种更好或更简单的方法来实现它：

function nextab() {
  document.getElementById("tab-content1").style.display = "none";
  document.getElementById("tab-content2").style.display = "block";

};

function prevtab() {
  document.getElementById("tab-content1").style.display = "block";
  document.getElementById("tab-content2").style.display = "none";

};

或者可能就像当选择一个选项时自动转到下一个选项卡，但它不能那样工作：

 <select name="theme_1" class="segment-select">
     <option onclick="nextab()" value="kyoto_light">
         Light
     </option>

     <option onclick="nextab()" value="kyoto_dark">
         Dark
     </option>
</select>

然后，我正在尝试通过此question处理我的代码，并尝试获得相同的结果，但是我无法通过在页面中添加此代码库来使其正常工作，我不知道为什么：

var selects = $("select[name=theme_1],select[name=theme_2],select[name=theme_3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});

问题可能出在我的js部分。我如何才能从所有选择中仅选择一个值选项？我的意思是，仅选择一个选项，这是一个代码段：

jQuery(function($) {
  $(".segment-select").Segment();
  $('.box').not(':first').hide();   // hide all but first box
});


(function($) {
  $.fn.extend({
    Segment: function() {
      $(this).each(function() {
        var self = $(this);
        var onchange = self.attr('onchange');
        var wrapper = $("<div>", {
            class: "ui-segment"
        });

        $(this).find("option").each(function() {
          var option = $("<span>", {
            class: 'option',
            onclick: onchange,
            text: $(this).text(),
            value: $(this).val()
          });
          if ($(this).is(":selected")) {
            option.removeClass("active");
          }
          wrapper.append(option);
        });
        wrapper.find("span.option").click(function() {
          wrapper.find("span.option").removeClass("active");
          $(this).addClass("active");

          var optionValue = $(this).attr("value");  // this is the code from your change event:
          self.val(optionValue);
          if (optionValue) {
            $(".box").not("." + optionValue).hide();
            $("." + optionValue).show();
          } else {
            $(".box").hide();
          }
        });
        $(this).after(wrapper);
        $(this).hide();
      });
    }
  });
    


})(jQuery);

$(document).ready(function(){
  var selects = $("select[name=theme_1],select[name=theme_2],select[name=theme_3]");
  selects.on("change",function(evt){
     selects.not("[name=" + evt.target.name + "]").val(0);
  });
});

function nextab() {
  document.getElementById("tab-content1").style.display = "none";
  document.getElementById("tab-content2").style.display = "block";

};

function prevtab() {
  document.getElementById("tab-content1").style.display = "block";
  document.getElementById("tab-content2").style.display = "none";

};

.ui-segment {
  color: rgb(0, 122, 255);
  border: 1px solid rgb(0, 122, 255);
  border-radius: 4px;
  display: inline-block;
  font-family: 'Lato', Georgia, Serif;
}

.ui-segment span.option.active {
  background-color: rgb(0, 122, 255);
  color: white;
}

.ui-segment span.option {
  font-size: 13px;
  padding-left: 23px;
  padding-right: 23px;
  text-align: center;
  display: inline-block;
  line-height: 25px;
  margin: 0px;
  float: left;
  cursor: pointer;
  border-right: 1px solid rgb(0, 122, 255);
}

.ui-segment span.option:last-child {
  border-right: none;
}

.segment-select {
  display: none;
}











body,
html {
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-weight: 100;
  text-align: center;
  font-family: helvetica;
}

.tabs input[type=radio] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tabs {
  width: 650px;
  float: none;
  list-style: none;
  position: relative;
  padding: 0;
  margin: 75px auto;
}

.tabs li {
  float: left;
}

.tabs label {
  display: none;
  padding: 10px 20px;
  border-radius: 2px 2px 0 0;
  color: #08C;
  font-size: 24px;
  font-weight: normal;
  font-family: 'Lily Script One', helveti;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
  top: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.tabs label:hover {
  background: rgba(255, 255, 255, 0.5);
  top: 0;
}

[id^=tab]:checked+label {
  background: #ccc;
  color: white;
  top: 0;
}

[id^=tab]:checked~[id^=tab-content] {
  display: block;
}

.tab-content {
  z-index: 2;
  display: none;
  text-align: left;
  width: 100%;
  font-size: 20px;
  line-height: 140%;
  padding-top: 10px;
  background: #ccc;
  padding: 15px;
  color: white;
  position: absolute;
  top: 53px;
  left: 0;
  box-sizing: border-box;
  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

<ul class="tabs">
  <li>
    <input type="radio" checked name="tabs" id="tab1">
    <label for="tab1">tab 1</label>
    <div id="tab-content1" class="tab-content animated fadeIn">

              
          <select name="theme_1" class="segment-select">
             <option value="kyoto_light">
               Light
             </option>
                
             <option value="kyoto_dark">
               Dark
             </option>
          </select>
              
          <select name="theme_2" class="segment-select">
             <option value="horizon_light">
               Light
             </option>
                
             <option value="horizon_dark">
               Dark
             </option>
          </select>
              
          <select name="theme_3" class="segment-select">
             <option value="sunny_light">
               Light
             </option>
                
             <option value="sunny_dark">
               Dark
             </option>
          </select>
              
              
              
          <div onclick="nextab()">Next</div> 

    </div>

  </li>
    
    
  <li>
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2">tab 2</label>
    <div id="tab-content2" class="tab-content animated fadeIn">
            
      <div class="kyoto_light box">Light Kyoto</div>
      <div class="kyoto_dark box">Dark Kyoto</div>
            
      <div class="horizon_light box">Light Horizon</div>
      <div class="horizon_dark box">Dark Horizon</div>
            
      <div class="sunny_light box">Light Sunny</div>
      <div class="sunny_dark box">Dark Sunny</div>
              
      <div onclick="prevtab()">Prev</div>
    </div>
  </li>
</ul>

      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="segment.js"></script>

从多个选项中仅选择一个值选项

0 个答案: