Для IE9 вкладки меняются только при нажатии вкладок, а не при нажатии на текст на вкладках

Question

У меня есть набор вкладок для IE9. Я хочу, чтобы активная вкладка была белой с оранжевым текстом, а неактивная вкладка была серой с черным текстом.

В режиме наведения, который работает, вы должны щелкнуть вкладку, чтобы изменить вкладку. Но чтобы изменить цвет текста, вам нужно щелкнуть только по тексту. Щелчок по тексту не меняет вкладку, и нажатие на вкладку не меняет цвет текста. Они не связаны. Я хочу изменить цвет текста и вкладки при щелчке по тексту или щелчке по вкладке. Они должны быть связаны. Вы можете увидеть действие здесь:

http://jsfiddle.net/Lance_Bitner/v43c9a9m/

$(function() { 
    $("b").click(function(e) { 
    e.preventDefault(); 
    $("b").addClass("font2").not(this).removeClass("font2"); 
    }); 
}); 

Answer 1

Поскольку вы добавляете: e.preventDefault();

//Updated Function.. 
 
$(function() { 
 
    $(".tab-label").click(function(e) { 
 
    $(".tab-label").find('b').removeClass("font2"); 
 
    $(this).find('b').addClass("font2"); 
 
    }); 
 
});

.tabs { 
 
    font-size: 0; 
 
    margin: 25px 0; 
 
} 
 

 
.tabs:after { 
 
    clear: both; 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.tabs .tab { 
 
    display: inline; 
 
} 
 

 
.tabs .tab-label { 
 
    background: rgba(222, 222, 222, 1.00); 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-size: 1rem; 
 
    left: 1px; 
 
    margin-left: -1px; 
 
    padding: 10px; 
 
    position: relative; 
 
    vertical-align: bottom; 
 
} 
 

 
.tabs .tab > [type="radio"] { 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    opacity: 0; 
 
    position: fixed; 
 
    width: 1px; 
 
    z-index: -1; 
 
} 
 

 
.tabs .tab-panel { 
 
    display: inline; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 0; 
 
    width: 0; 
 
} 
 

 
.tabs .tab-content { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    display: block; 
 
    background: white; 
 
    padding: 0 20px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    font-size: 16px; 
 
    font-size: 1rem; 
 
    margin-top: -1px; 
 
    width: 100%; 
 
} 
 

 
.tabs .tab [type="radio"]:checked + .tab-label { 
 
    background: white; 
 
    border-bottom-width: 0; 
 
    padding-bottom: 11px; 
 
    z-index: 1; 
 
} 
 

 
.tabs .tab [type="radio"]:checked ~ .tab-panel { 
 
    display: inline; 
 
} 
 

 
.tabs a { 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    background: #fff; 
 
    color: #000; 
 
    border-top: 1px solid #666; 
 
    border-left: 1px solid #ff0000; 
 
    border-right: 1px solid #ff0000; 
 
    border-bottom: 1px solid #ff0000; 
 
    display: inline; 
 
} 
 

 
.tabs a:hover, 
 
.tabs a.active { 
 
    background: #666; 
 
    color: black; 
 
} 
 

 
.tabContent { 
 
    border: 1px solid #4cff00; 
 
    margin: 4px 0; 
 
    padding: 5px; 
 
    height: 500px; 
 
} 
 

 
#day2 { 
 
    margin-top: -24px; 
 
} 
 

 
#day3 { 
 
    margin-top: -48px; 
 
} 
 

 
.center-image { 
 
    position: absolute; 
 
    opacity: .3; 
 
    width: 90%; 
 
    left: 170px; 
 
    top: -75px; 
 
    z-index: 10; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
 
} 
 

 
.text-glow { 
 
    /*text-shadow: -3px 0px 10px #FFF, 3px 0px 10px #FFF, 0px 0px 10px #FFF, -3px -3px 10px #FFF, 3px -3px 10px #FFF, 0px -3px 10px #FFF, -3px 3px 10px #FFF, 3px 3px 10px #FFF, 0px 3px 10px #FFF; 
 
     */ 
 
    z-index: 20; 
 
    margin-left: -25px; 
 
} 
 

 
.main2 { 
 
    padding-left: 25px; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 97%; 
 
    border: 1px solid #ddd; 
 
    margin: 25px; 
 
} 
 

 
th, 
 
td { 
 
    border: none; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: rgba(197, 232, 255, .2); 
 
} 
 

 
.font { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: black; 
 
} 
 

 
.font:hover, 
 
.font:active, 
 
.font:focus, 
 
.font:visited, 
 
.font:link .font2 { 
 
    color: rgba(255, 117, 0, 1.00); 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
.name { 
 
    min-width: 350px !important; 
 
} 
 

 
.right-image { 
 
    /*background-repeat: no-repeat; 
 
     background-position: top right; 
 
     background-image: url("~/Content/Images/Untitled-1.png"); 
 
     background-image: linear-gradient(rgba(167,218,255,0.20),white); 
 
     background-image: url("~/content/images/Untitled-1.png");*/ 
 
    width: 510px; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: -5px; 
 
    z-index: 50; 
 
} 
 

 
.tabs { 
 
    padding-right: 25px; 
 
} 
 

 
.tabs a { 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    background: #fff; 
 
    color: #000; 
 
    border-top: 1px solid #666; 
 
    border-left: 1px solid #ff0000; 
 
    border-right: 1px solid #ff0000; 
 
    border-bottom: 1px solid #ff0000; 
 
    display: inline; 
 
} 
 

 
.tabs a:hover, 
 
.tabs a.active { 
 
    background: #666; 
 
    color: #fff; 
 
} 
 

 
.tabContent { 
 
    border: 1px solid #4cff00; 
 
    margin: 4px 0; 
 
    padding: 5px; 
 
    height: 500px; 
 
} 
 

 
.center-image { 
 
    position: absolute; 
 
    opacity: 1.0; 
 
    width: 100%; 
 
    height: 250px; 
 
    z-index: 10; 
 
    left: 0px; 
 
    top: -10px; 
 
    /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
 
     background-image: url("~/Content/Images/banner3.png")no-repeat;*/ 
 
} 
 

 
.center-image > img { 
 
    width: 100%; 
 
} 
 

 
.text-glow { 
 
    /*text-shadow: -3px 0px 10px #FFF, 3px 0px 10px #FFF, 0px 0px 10px #FFF, -3px -3px 10px #FFF, 3px -3px 10px #FFF, 0px -3px 10px #FFF, -3px 3px 10px #FFF, 3px 3px 10px #FFF, 0px 3px 10px #FFF; 
 
     */ 
 
    z-index: 20; 
 
    position: absolute; 
 
    left: 25px; 
 
    top: 25px; 
 
} 
 

 
.font2 { 
 
    color: rgba(255, 117, 0, 1.00); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabs"> 
 
    <div class="tab"> 
 
     <input class="tab-radio" type="radio" id="tab-1" name="tab-group-1" checked> 
 
     <label class="tab-label" for="tab-1"> <b class="font">Day 1 - July 19, 2016</b></label> 
 
     <div class="tab-panel"> 
 
      <div class="tab-content"> 
 
       <table> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="tab"> 
 
     <input class="tab-radio" type="radio" id="tab-2" name="tab-group-1"> 
 
     <label class="tab-label" for="tab-2"> 
 
     <b class="font">Day 2 - July 20, 2016</b> 
 
     </label> 
 
     <div class="tab-panel"> 
 
      <div class="tab-content"> 
 
       <table> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="tab"> 
 
     <input class="tab-radio" type="radio" id="tab-3" name="tab-group-1"> 
 
     <label class="tab-label" for="tab-3"> <b class="font">Day 3 - July 21, 2016</b></label> 
 
     <div class="tab-panel"> 
 
      <div class="tab-content"> 
 
       <table> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>