在选项上选择显示 div 并隐藏其他

Question

我正在处理具有选择选项值的部分代码，并希望在更改时显示特定 div 并隐藏其他 div。但我不能让它工作，这是我的代码。

我不明白为什么 div 没有出现在第一个示例中，而与第二个示例相反。

我的目标是在选项卡 1 中添加选项卡并添加选择选项，在选项卡 2 中添加 div，当我在选项卡 1 中选择一个选项时，它会自动在选项卡 2 中显示结果。我希望我是清楚的。

jQuery(function($) {

  $(".segment-select").Segment();

});


$(document).ready(function() {
  $(document).on("click", ".ui-segment span", function() {
    var value = $(this).attr('value');
    $(".box").hide();
    $(".box." + value).show();
  });
  $(".ui-segment span:first").click();
});

(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.addClass("active");
          }
          wrapper.append(option);
        });
        wrapper.find("span.option").click(function() {
          wrapper.find("span.option").removeClass("active");
          $(this).addClass("active");
          self.val($(this).attr('value'));
        });
        $(this).after(wrapper);
        $(this).hide();
      });
    }

  });

})(jQuery);

.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;
  height: 25px;
  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: block;
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<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 class="segment-select">
        <option value="red" selected>Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>

    </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="red box">red option</div>
      <div class="green box">green option</div>
      <div class="blue box">blue option</div>

    </div>
  </li>
</ul>

Answer 1

如果您检查 DOM，您会发现选择框正在转换为 DIV->SPAN 结构并将其显示为选项卡。所以这里正常的选择框更改事件不会被触发。 您需要在 span 上绑定 click 事件并读取 value 属性，然后应用逻辑来显示和隐藏 div。

参见下面的工作 sn-p

jQuery(function ($){

        $(".segment-select").Segment();
          
      });

    
$(document).ready(function(){
    $(document).on("click",".ui-segment span",function(){
        var value= $(this).attr('value');
        $(".box").hide();
        $(".box." + value).show();
    });
   $(".ui-segment span:first").click();
});



(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.addClass("active");
					}
					wrapper.append(option);
				});
				wrapper.find("span.option").click(function (){
					wrapper.find("span.option").removeClass("active");
					$(this).addClass("active");
					self.val($(this).attr('value'));
				});
				$(this).after(wrapper);
				$(this).hide();
			});
        }

    });
        
})(jQuery);

.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;
	height: 25px;
	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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



<h1>EXAMPLE THAT I WANT BUT DOES NOT WORK</h1>
<select class="segment-select">
            <option value="red" selected>Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
  </select>

      
    <div class="red box">red option</div>
    <div class="green box">green option</div>
    <div class="blue box">blue option</div>  
      
      

<h1>EXAMPLE WHO WORK</h1>
        <select>
            <option value="red" selected>Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>

      
    <div class="red box">red option</div>
    <div class="green box">green option</div>
    <div class="blue box">blue option</div> 
      
      
      
      
      
      

<script type="text/javascript" src="segment.js"></script>

</html>