对于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();

＆＃13;

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;