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

Question

我正在使用select选项值来处理部分代码，并希望显示更改时的特定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结构并将其显示为选项卡。 因此，此处的普通选择框更改事件将不会触发。 您需要在跨度上绑定click事件并读取value属性，然后应用逻辑来显示和隐藏div。

参见下面的工作片段

 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>