Question

问题：点击继续按钮时，我想改变第一个链接黑色的颜色和剩余的两个链接灰。当第二次点击继续按钮时，我想要改变第二个链接黑色的颜色和剩余的两个链接灰。同样需要第三次进行，另外第三次进行继续按钮更改以保存。

HTML：

<div class="nav2">
    <div class="navtxt container">
        <ol>
            <li id="navlnk">Assess your risk tolerance</li>
            <div id="b" class="fif"><a href="#navlnk1" onclick="changeColor('navlnk1'); return false;"><span class="glyphicon glyphicon-menu-right" style="padding-left: 20px;"></span></a></div>
            <li id="navlnk1">View your plan</li>
            <div id="b" class="fif"><a href="#navlnk2" onclick="changeColor('navlnk2'); return false;"><span class="glyphicon glyphicon-menu-right" style="padding-left: 20px;"></span></a></div>
            <li id="navlnk2">Open account</li>
        </ol>
    </div>
</div>
<input type='button' name='add' onclick="myFunction()"/>

JAVASCRIPT

function myFunction() {
document.getElementById("continue").value++; value='+'
if (value==1){
    document.getElementById('navlnk').style.color = "#000";
}
else if(value==2){
    document.getElementById('navlnk1').style.color = "#000";
}
else if(value==3)
{
    document.getElementById('navlnk2').style.color = "#000";
    document.getElementById('navlnk2').inner.html = "Save";

}

}

Answer 1

你需要创建一个这样的函数：

function changeColor(type) {
      if (type == 'navlnk1') {
               //add color on first div
               document.getElementById('navlnk1').style.color = "#000";
        } else {
                //add color on second div
                document.getElementById('navlnk2').style.color = "#000";
              }
   }

我希望这会有所帮助

Answer 2

我已根据您的需要修改了您的代码。试试吧。

＆＃13;

$code

＆＃13;

var num = 1;
function myFunction() {
	var listArry = document.getElementsByClassName('list');
	for(var i = 0; i < listArry.length; i++){
	    listArry[i].style.color = "grey";
	}
	if (num==1){
		document.getElementById('navlnk').style.color = "black";
		num=2;
	}
	else if(num==2){
		document.getElementById('navlnk1').style.color = "black";
	    num=3;
	}
	else if(num==3)
	{
		document.getElementById('navlnk2').style.color = "black";
		document.getElementById('btn').value = "Save";
		num=1;
	}
}

＆＃13;

Answer 3

以下是使用jquery的代码：

 <style>
        .black{
            color: black;
        }
        .hash{
            color:darkkhaki;
        }
    </style>
    <div class="nav2 container">
        <div class="navtxt container">
            <ol>
                <li id="navlnk"><a  href="#navlnk1"><span style="padding-left: 20px;" class="glyphicon glyphicon-ok-circle"></span>Assess your risk tolerance</a></li>
                <li id="navlnk1"><a href="#navlnk2"><span class="glyphicon glyphicon-chevron-right" style="padding-left: 20px;" ></span>View your plan</a></li>
                <li id="navlnk2"><a  href="#navlnk2" ><span class="glyphicon glyphicon-cog" style="padding-left: 20px;"></span>Open account</a></li>
            </ol>
        </div>
        <input type='button' name='add' class="btn" value="Continue" id="continue"/>
    </div>
    <script>
        $(document).ready(function () {
            var cnt = 0;
            $('#continue').on("click", function () {
                var nav = $('#navlnk a');
                var nav1 = $('#navlnk1 a');
                var nav2 = $('#navlnk2 a');
                if (cnt == 0) {
                    $(nav).addClass('black');
                    $(nav2).addClass('hash');
                    $(nav1).addClass('hash');
                }
                else if (cnt == 1)
                {
                    alert('dsd');
                    $(nav).removeClass('black').addClass('hash');
                    $(nav1).removeClass('hash').addClass('black');
                    cnt++;
                }
               else if(cnt == 3) {
                   $(nav1).removeClass('black').addClass('hash');
                   $(nav2).removeClass('hash').addClass('black');
                    $(this).val('Save');
                }
                cnt++;
            });
        });
    </script>

如何使用if else条件更改被调用的元素颜色和文本？

3 个答案: