Question

您好我想将class添加到父div之后的div的范围内。

HTML

<a>

此处当用户点击<span>代码时，我想将<div class="m-t-sm step-title">之后的课程添加到#include <stdio.h> int main() { int user_input, tbl; printf("Enter any number: \t"); scanf("%i", &user_input); tbl = user_input; for(int i=2; i < user_input; i++) { tbl = tbl * i; } printf("Factorial of %i is %i", user_input, tbl); }。

如何使用jquery做到这一点？

Answer 1

请尝试此

$(document).ready(function(){
    $("a").click(function(){
        var position = $(this).attr('href').split("#")[1];
        $('.'+position ).addClass('your_class')
    });
});

Answer 2

习惯了

$(document).ready(function(){
    $("a").click(function(){
        $(this).parents('.stepwizard').next().find('span').addClass('yourClass');
    });
});

我已更新到我的回答@Rino Raj代码

$(document).ready(function(){
    $("a").click(function(){
        var position = $(this).attr('href').split("#")[1];
        $('.m-t-sm.step-title  span').removeClass('your_class');
        $('.'+position ).addClass('your_class');
        
    });
});

.your_class{border:solid 10px red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="stepwizard">
    <ul class="stepwizard-row">
        <li class="stepwizard-step">
            <span class="step-border"><a href="#step1">1</a></span>
         
        </li>
        <li class="stepwizard-step">
            <span class=""><a href="#step2">2</a></span>
          
        </li>
        <li class="stepwizard-step">
            <span class=""><a href="#step3">3</a></span>
        
        </li>
    </ul>
</div>
<div class="m-t-sm step-title">
    <span class="step1">BASIC INFO</span>
    <span class="step2">REGISTERED NUMBERS</span>
    <span class="step3">CLIENT SERVICES</span>
</div>

Answer 3

最简单的选择是在两者之间添加直接链接，而不是解析ID以找到要选择的类。

这也允许您使用语义名称而不是＆＃34; 1＆＃34;，＆＃34; 2＆＃34;等

为每个data-step添加a，为每个data-step添加匹配的step-title

<div class="stepwizard">
    <ul class="stepwizard-row">
        <li class="stepwizard-step">
            <span class="step-border">
                <a href="#step1" data-step="step1" data-toggle="tab">1</a>
            </span>
        </li>
        <li class="stepwizard-step">
            <span class="">
                <a href="#step2" data-step="stepnumbers" data-toggle="tab">2</a>
            </span>
        </li>
        <li class="stepwizard-step">
            <span class="">
                <a href="#step3" data-step="laststep" class="p-n-t step-tab" aria-controls="documents" role="tab" data-toggle="tab">3</a>
            </span>
        </li>
    </ul>
</div>
<div class="m-t-sm step-title">
    <span class="step1" data-step="step1">BASIC INFO</span> //here i want to add class
    <span class="stepnumbers" data-step="step2">REGISTERED NUMBERS</span>
    <span class="laststep" data-step="step3">CLIENT SERVICES</span>
</div>

然后很容易将两者联系起来：

$(".stepwizard a[data-step]").click(function() {
    $(".step-title>span").removeClass("selected");
    $(".step-title>span[data-step=" + $(this).data("step") + "]").addClass("selected");
});

Answer 4

你可以像下面这样做。在下一个.stepwizard下找到最接近的.step1然后div。

$("a").click(function () {
    var i = $(this).text().trim()-1;
    $(this).closest('.stepwizard').next('div').find('span').eq(i).addClass('your_class');
});

改变父div之后的div的css

4 个答案: