Wie kann ein Element aktiviert bleiben, wenn auf ein anderes Element geklickt wird?

Question

ich mit diesem Code arbeiten:

$('.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>

ich unter jeder Kategorie für das Element möchte, aktiv bleiben, wenn ich über die anderen Kategorien schweben. Ich möchte nicht, dass es zurückspringt, wenn ich auf eine andere Kategorie klicke. Ich möchte, dass es abhängig davon bleibt, auf welche Kategorie ich klicke.

Hilfe bitte?

Answer 1

Dies ist möglich, mit ein wenig extra CSS und jQuery (ich habe #oneActive, #twoActive ...) hinzugefügt. Außerdem habe ich dein jQuery ein wenig aufgeräumt und das meiste neu geschrieben, um aktiv zu werden.

$('.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>