如何在单击其他元素时使元素保持活动状态？

Question

我与此代码的工作：

$('.tab1-c').show(); 
 
$('.one').click(function(){ 
 
    "use strict"; 
 
    $('.tab1-c').show(); 
 
    $('.tab2-c').hide(); 
 
    $('.tab3-c').hide(); 
 
    $('.tab4-c').hide(); 
 
}); 
 

 
$('.two').click(function(){ 
 
\t "use strict"; 
 
    $('.tab1-c').hide(); 
 
    $('.tab2-c').show(); 
 
    $('.tab3-c').hide(); 
 
    $('.tab4-c').hide(); 
 
}); 
 

 
$('.three').click(function(){ 
 
\t "use strict"; 
 
    $('.tab1-c').hide(); 
 
    $('.tab2-c').hide(); 
 
    $('.tab3-c').show(); 
 
    $('.tab4-c').hide(); 
 
}); 
 

 
$('.four').click(function(){ 
 
\t "use strict"; 
 
    $('.tab1-c').hide(); 
 
    $('.tab2-c').hide(); 
 
    $('.tab3-c').hide(); 
 
    $('.tab4-c').show(); 
 
});

.tab-nav-wrapper { 
 
    max-width: auto; 
 
    margin: 0 auto; 
 
    font-family: Open sans; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-weight: bold; 
 
    
 
} 
 

 

 
.tab-content-wrapper { 
 
    background-color:#fff; 
 
    width: auto; 
 
    min-height: auto; 
 
    padding: 15px 35px 5px; 
 
    margin: 0 auto; 
 
    text-align:justify; 
 
} 
 

 

 
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none 
 

 
} 
 

 
.tab-nav-wrapper ul li { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 25%; 
 
    margin: 0; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
.tab-nav-wrapper a { 
 
    display: inline-block; 
 
    width: 25%; 
 
    padding: .75rem ; 
 
    margin: 0; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 

 

 
.fonts-content { 
 
    font-family: droid serif; 
 
    font-size: 15px; 
 
    line-height: 20px; 
 
    color: #000000 !important; 
 
    text-indent: 50px; 
 
} 
 

 
.two { 
 
    
 
} 
 

 
.two:hover ~ hr { 
 
    margin-left: 24.5%; 
 
    background: #d48344; 
 
} 
 

 
.three { 
 
    
 
} 
 
.three:hover ~ hr { 
 
    margin-left: 49%; 
 
    background: #706a87; 
 
} 
 

 
.four { 
 
    
 
} 
 
.four:hover ~ hr { 
 
    margin-left: 74%; 
 
    background: #47435f; 
 
} 
 

 
hr { 
 
    height: .25rem; 
 
    width: 25%; 
 
    margin: 0; 
 
    background: #d4bba7; 
 
    border: none; 
 
    transition: .3s ease-in-out; 
 
} 
 

 
h4 { 
 
    font-size: 30px; 
 
    font-family: Glegoo; 
 
    font-weight: bold; 
 
    margin-bottom: 15px; 
 
    margin-top: 20px; 
 
    line-height: 35px; 
 
    font-color: #000 !important; 
 
    text-align: center; 
 
}

<div class="tab-nav-wrapper"> 
 
    <ul> 
 
    <li class="one">Story #1</li><!-- 
 
--><li class="two">Story #2</li><!-- 
 
--><li class="three">Story #3</li><!-- 
 
--><li class="four">Story #4</li> 
 
    <hr> 
 
    </ul> 
 
</div>

我想以下是不同类别的元素，当我将鼠标悬停在其他类别保持活跃。我不想让它在点击不同的类别时跳回原来的位置。我希望它依赖于我点击的类别。

请帮忙吗？

Answer 1

这可以通过使用一些额外的CSS和jQuery（我加了#oneActive,#twoActive ...）。另外，我清理了一下你的jQuery，并且重写了它的大部分内容以积极地工作。

$('.tab1-c').show(); 
 

 
mapping = { 
 
    "one":"tab1-c", 
 
    "two":"tab2-c", 
 
    "three":"tab3-c", 
 
    "four":"tab4-c" 
 
}; 
 
$('.one, .two, .three, .four').click(function(){ 
 
    $('.' + mapping[$(this).attr("class")]) 
 
    .show() 
 
     .siblings() 
 
     .hide(); 
 
    $(this) 
 
     .attr('id', $(this).attr("class") + "Active") 
 
     .siblings() 
 
     .attr("id",""); 
 
});

.tab-nav-wrapper { 
 
    max-width: auto; 
 
    margin: 0 auto; 
 
    font-family: Open sans; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-weight: bold; 
 
    
 
} 
 

 

 
.tab-content-wrapper { 
 
    background-color:#fff; 
 
    width: auto; 
 
    min-height: auto; 
 
    padding: 15px 35px 5px; 
 
    margin: 0 auto; 
 
    text-align:justify; 
 
} 
 

 

 
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none 
 

 
} 
 

 
.tab-nav-wrapper ul li { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 25%; 
 
    margin: 0; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
.tab-nav-wrapper a { 
 
    display: inline-block; 
 
    width: 25%; 
 
    padding: .75rem ; 
 
    margin: 0; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 

 

 
.fonts-content { 
 
    font-family: droid serif; 
 
    font-size: 15px; 
 
    line-height: 20px; 
 
    color: #000000 !important; 
 
    text-indent: 50px; 
 
} 
 

 
.two { 
 
    
 
} 
 

 
.two:hover ~ hr, #twoActive ~ hr { 
 
    margin-left: 24.5%; 
 
    background: #d48344; 
 
} 
 

 
.three { 
 
    
 
} 
 
.three:hover ~ hr, #threeActive ~ hr { 
 
    margin-left: 49%; 
 
    background: #706a87; 
 
} 
 

 
.four { 
 
    
 
} 
 
.four:hover ~ hr, #fourActive ~ hr { 
 
    margin-left: 74%; 
 
    background: #47435f; 
 
} 
 

 
hr { 
 
    height: .25rem; 
 
    width: 25%; 
 
    margin: 0; 
 
    background: #d4bba7; 
 
    border: none; 
 
    transition: .3s ease-in-out; 
 
} 
 

 
h4 { 
 
    font-size: 30px; 
 
    font-family: Glegoo; 
 
    font-weight: bold; 
 
    margin-bottom: 15px; 
 
    margin-top: 20px; 
 
    line-height: 35px; 
 
    font-color: #000 !important; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-nav-wrapper"> 
 
    <ul> 
 
    <li class="one">Story #1</li><!-- 
 
--><li class="two">Story #2</li><!-- 
 
--><li class="three">Story #3</li><!-- 
 
--><li class="four">Story #4</li> 
 
    <hr> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <div class="tab1-c">test1</div> 
 
    <div class="tab2-c">test2</div> 
 
    <div class="tab3-c">test3</div> 
 
    <div class="tab4-c">test4</div> 
 
</div>