Elenco prodotti con jquery

[pippuccio76]

Senza conoscere lo sviluppo del progetto credo sia impossibile fare ipotesi

ecco la pagina prodotti:

<?php
    include 'Parti/parti.php';
       echo $superiore;
?>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div class="row" id="contenuti">
    <div class="span3" id="menulat">
        <a href="#" id="processori" ><h4 >Processori</h4></a>
            <ul id="processori1"  style="display: none;">
                <li><a href="#" id="proce1"><h5 >Amd</h5></a></li>
                <li><a href="#" id="proce2"><h5 >Intel</h5></a></li>
            </ul>    
        
        <a href="#" id="video"><h4>Schede Videoi</h4></a>

    </div>    
    <div class="span 9" id="foto">
        
            <br>
    <br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br>

    </div>





</div>
    

    <script>
        $( "#processori" ).click(function() {
        $( "#processori1" ).toggle( "slow" );
        });


        $('#proce1').click(function()
        {
          $('#foto').css("background-image", "url(img/articoloa.jpg) ");  
        });

        $('#proce2').click(function()
        {
          $('#foto').css("background-image", "url(img/articolob.jpg) ");  
        });
    </script>








    </div> <!-- Chiusura container -->
     <script src="js/bootstrap.min.js"></script>
     
</body>
</html>

E il css

body{
    background-image: url('../img/bg01.png');
}
#container{
    text-align: center;
}

#testata{
  
    
}

#menu{
    text-align: center;
    margin-top: 50px;
    
}
#logo{
    margin-top: 30px;
}

#
ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    text-shadow: 5px 1px 1px white;
    margin: 0;
    padding: 0;
    list-style: none;


}
  
ul#menu li {
    background-image: url('../img/metal.jpg');
    border-radius:10px 10px 0px 0px;
    border-bottom: 5px solid #FFA500;
    border-top: 2px solid #FFA500;
    border-left: 2px solid #FFA500;
    border-right: 2px solid #FFA500;
    display: block;
    width: 130px;
    height: 30px;
    margin: 2px;
    float: left; /* elementi su singola riga */
    transition: all 1800ms linear;
}
  
ul#menu li a {
    color: black;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 150px;
    height: 30px;
    
}
  
ul#menu li:hover {
    background-color: #ADD8E6;
    border-bottom: 5px solid gray;
    transform: rotate(360deg);

}
#menu li.active{
    background-color: violet;

}

hr{
    color: #FFA500;
    background-color: #FFA500;
}



#menulat{
    border-right: 1px solid black;
}

#menulat a{
    color: grey;
}
#menulat li{
    list-style: none;
}
#foto{
    height: 50%;
    width: 70%;
    background-image: url('../img/intro.jpg') ;
    background-repeat:no-repeat;
}