Question

我正在创建Chrome扩展程序，并且在单击按钮时需要显示一个确定的名称，然后隐藏其他按钮。这三个按钮的代码相同，但其中只有两个起作用。

它是用3个按钮（cross，mlb和hsp）和3个按钮创建的，每个按钮都与一个按钮相关联。例如，单击“ cross”与mlb和hsp相关联，则必须隐藏（display：none），而必须看到cross（display：block）。单击按钮交叉和hsp时可以使用，但不能使用mlb按钮。

我尝试使用单独的功能，但也不起作用。

任何帮助将不胜感激。

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#hsp').addEventListener('click', myFunctionHSP);
  document.querySelector('#cross').addEventListener('click', myFunctionHSP);
  document.querySelector('#mlb').addEventListener('click', myFunctionHSP);
	document.querySelector('#udequipo').addEventListener('click', myFunctionUnidades);
});

function myFunctionHSP() {
    var hsp = document.getElementById("toggleHSP");
	var latam = document.getElementById("toggleLATAM");
	var mlb = document.getElementById("toggleMLB");
	
	if (hsp.style.display = "none") {
        hsp.style.display = "block";
		latam.style.display = "none";
		mlb.style.display = "none";	}
	else if (latam.style.display = "none") {
        latam.style.display = "block";
	    hsp.style.display = "none";
		mlb.style.display = "none";}
	else if (mlb.style.display = "none") {
        mlb.style.display = "block";
		latam.style.display = "none";
		hsp.style.display = "none";
	    } 
}


	
	

	function myFunctionUnidades(){
		var hsp = document.getElementById("toggleHSP");
		var latam = document.getElementById("toggleLATAM");
		var mlb = document.getElementById("toggleMLB");
		var uni= document.getElementById("unidades");	
		if (uni.style.display = "none") {
       	    uni.style.display = "block";
			latam.style.display = "none";
			hsp.style.display = "none";
			mlb.style.display = "none";
	    	} 
	
	}

   #header{
    width: 400px;
    display: inline-block;
    margin: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
}

#toggleHSP {
    border-color: red;
    display: none;
}

#toggleLATAM {
    border-color: red;
    display: none;
    
}

#toggleMLB {
    border-color: red;
    display: none;
}

.principal {
    width:auto;
    height: auto;
    text-align:center;
}


#unidades {
    display: none;
    width: auto;
    height: 300px;
    vertical-align: bottom;
}

#loguito {
    display: inline-block;
    float: left;
}

#loguito2 {
    display: inline-block;
    float: right;
}


#udequipo {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    width: 131px;
    height: 50px;
    margin-top: 10px;
}

#otracosa {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    width: 131px;
    height: 50px;
    margin-top: 10px;
}

#otraotracosa {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    width: 131px;
    height: 50px;
    margin-top: 10px;
}

.seleccion {
    width: 133px;
    height: 50px;
}

.division {
    background-color: white;
    border-width: 0px;
    min-width: 100px;
    min-height: 50px;
    vertical-align:central;
}

    .division:hover {
        background-color: blue;
        color: white;
    }

    .division:active {
        background-color: red;
    }

.internal {
    width: 400px;
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    height: 50px;
    margin-top: 10px;
}

<!DOCTYPE html>

<LINK REL=StyleSheet HREF="meli.css" TYPE="text/css" MEDIA=screen>
<script src="meli.js"></script>


    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>MeliTools</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> </title>
    </head>
    <body>

        <div id="header">
            <image id="loguito" src="icon48.png"> </image><button class="division" id="hsp"> HSP </button>
            <button active class="division" id="cross"> LATAM </button>
            <button class="division" id="mlb"> MLB </button><image id="loguito2" src="icon48.png">
        </div>

        <div class="principal" id="toggleHSP">
            TEST HSP
        </div>

        <div class="principal" id="toggleLATAM">
            <button class="submenu" id="udequipo"> sub1 </button>
            <button class="division" id="otracosa"> sub2 </button>
            <button class="division" id="otraotracosa"> sub3 </button>

            <div class="jojo" id="unidades">
                <button class="internal" id="prueba"> interno1 </button><br>
                <button class="internal" id="prueba1"> interno2 </button><br>
                <button class="internal" id="prueba2"> interno3 </button><br>
            </div>

        </div>

        <div class="principal" id="toggleMLB">
            TEST MLB
        </div>


        <div> Test info bar </div>

    </body >
    </html >

用JavaScript更改可见的<div>

0 个答案: