verander class (waarschijnlijk met javascript

Status
Niet open voor verdere reacties.

fsasfsas

Gebruiker
Lid geworden
11 sep 2006
Berichten
429
Dag

ik ben een website aan het maken maar heb niet veel verstand van javascript. Ik ben me aan het inlezen en tutorials aan het volgen maar ik heb het tot op heden niet voor elkaar gekregen. Ik hoop dat het iets simpels is.

Ik heb een naviagiemenu met de menu-items <a href="#">
Het is een bootstrap omgeving en op de een of andere manier worden mijn css styling opties voor deze a's niet gepakt. Daarom heb ik binnen de a een span gemaakt waardoor ik de class kan veranderen en zo het uiterlijk van het menu-item.

Nu wil ik graag de class van de span binnen in de a-tag veranderen als er op de a geklikt wordt. En wel zodanig dat die class van de eerdere menu-optie klik ook er af gehaald wordt.
Ik heb op internet veel eenvoudige voorbeelden voorbij zien komen waarin de class van a zelf of van een parent veranderd wordt, maar het lukt me niet met de span binnen in de a.

mijn code is als volgt:

HTML:
...
<div class="navbar navbar-default navbar-fixed-top">
...
   <div class="container">
... 
      <div id="navbar" class="collapse navbar-collapse">
...
         <ul class="nav navbar-nav navbar-right">
...
            <li><a href="index.php"><span class="menu-anjo-active">Home</span></a></li>
....
het gaat dus om die laatste span met class="menu-anjo-active". hoe kan ik, als ik op een ander menu item klik, de class veranderen?
dus voordat er geklikt word is het
HTML:
...
<li><a href="index.php"><span class="menu-anjo-active">Home</span></a></li>
...
<li><a href="contact.php"><span class="menu-anjo">Contact</span></a></li>
en na klikken op contact moet het worden:
HTML:
...
<li><a href="index.php"><span class="menu-anjo">Home</span></a></li>
...
<li><a href="contact.php"><span class="menu-anjo-active">Contact</span></a></li>
Ik hoop dat iemand me wil helpen. Ik krijg het niet voor elkaar.

groetjes, Anjo
 
Ik ben er inmiddels achter dat het ingewikkelder ligt. Het heeft geen zin om het aan een klik te koppelen want bootstrap gebruikt de klik al om dropdown menu's te openen. Is er een andere manier om toch te bewerkstelligen wat ik wil? Dus op het moment dat je op een menu-item klikt, opent (door bootstrap) een dropdown menu maar ik zou dan ook graag de stijl van het menu-item wijzigen en het andere al gewijzigde menu-item "terug wijzigen". Ik begrijp dat het wel mogelijk is om twee functies aan een klik te hangen maar eentje daarvan is dus al gebruikt.
iemand enig idee?

groetjes, Anjo
 
bekijk eens :focus :before :after bij css3, of css3 menu zoeken of css3 slider zoeken of slider zonder js zoeken.
 
Het is een bootstrap omgeving en op de een of andere manier worden mijn css styling opties voor deze a's niet gepakt.
Werk met een id (hier #nav1) dan gaat het een stuk makkelijker.
Code:
<nav class="navbar" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div id="nav1" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.php">Home</a></li>
                <li class="dropdown active">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Producten<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="index.php">Voeten</a></li>
                        <li><a href="index.php">Benen</a></li>
                        <li class="active"><a href="index.php">Handen</a></li>
                        <li><a href="index.php">Armen</a></li>
                    </ul>
                </li>
                <li><a href="index.php">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS

/* algemeen */
.navbar,
.navbar .container,
.navbar .container-fluid {
    background-color: #333;
}
.navbar {
    margin-bottom: 20px;
    border-color: #777;
}
@media (min-width:768px) {
    .navbar {
        border-radius: 4px;
    }
}
.navbar-collapse {
    border-color: #bbb;
}
.navbar-nav .dropdown-menu {
    background-color: #333;
}
/* hamburger button */
.navbar .navbar-toggle,
.navbar .navbar-toggle:focus,
.navbar .navbar-toggle .icon-bar {
    border-color: #ccc;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:active {
    background-color: rgba(255,255,255,.2);
}
/* items */
#nav1 .navbar-nav a,
#nav1 .navbar-nav a:focus,
#nav1 .navbar-nav .open a,
#nav1 .navbar-nav .open a:focus {
    color: #eee;
    background-color: #333;
}
/* items active */
#nav1 .navbar-nav .active > a,
#nav1 .navbar-nav .active > a:focus,
#nav1 .navbar-nav .open .active > a,
#nav1 .navbar-nav .open .active > a:focus {
    color: #cc0;
    background-color: #444;
}
/* items hover */
#nav1 .navbar-nav a:hover,
#nav1 .navbar-nav a:active,
#nav1 .navbar-nav .open a:hover,
#nav1 .navbar-nav .open a:active {
    color: #ff0;
    background-color: #444;
}
/* items active hover */
#nav1 .navbar-nav .active > a:hover,
#nav1 .navbar-nav .active > a:active
#nav1 .navbar-nav .open .active > a:hover,
#nav1 .navbar-nav .open .active > a:active {
    color: #ff0;
    background-color: #555;
}
/* smartphone submenu */
@media (max-width:767px) {
    #nav1 .navbar-nav a .caret {
        float: right;
        margin: 8px 20px 0 0;
    }
    #nav1 .navbar-nav .open ul {
        background-color: #222;
    }
    #nav1 .navbar-nav .open ul a,
    #nav1 .navbar-nav .open ul a:focus    {
        color: #ddd;
        background-color: #222;
    }
    #nav1 .navbar-nav .open ul a:hover,
    #nav1 .navbar-nav .open ul a:active {
        color: #ff0;
        background-color: #333;
    }
    #nav1 .navbar-nav .open ul .active a:hover,
    #nav1 .navbar-nav .open ul .active a:focus {
        color: #ff0;
        background-color: #444;
    }
}
 
Laatst bewerkt:
verhip ja, een id... niet eens aan gedacht. Ga ik proberen want misschien is het dan eenvoudig opgelost.

groetjes, Anjo
 
ik zie dat het nog niet opgelost staat dus ik probeer even met js ipv jquery
essentie is: document.getElementById(id).className = 'mnuitem click';
rest is illustratie met het idee dat je er iets mee wil doen.
Code:
function M_over(id){
	if (id == m_select){
		document.getElementById(id).className = 'mnuitem click';		
	}else{
		document.getElementById(id).className = 'mnuitem hover';			
	}
	if (id.substring(0,3)=="top" =="top"&&!(id==m_topselect)){
	 	document.getElementById(id+"link").className = 'mnu';
	 	document.getElementById(m_topselect+"link").className = 'mnu hidden';
		m_topselect = id;	
	}
}  
function M_out(id){
	if (id == m_select){
		document.getElementById(id).className = 'mnuitem click';
	}else{
		document.getElementById(id).className = 'mnuitem out';	
	}
}
function M_click(id){// submenu beschikbaar
if (id.substring(0,3)=="top"&&!(id==m_topselect)){
		document.getElementById(m_topselect+"link").className = 'mnu hidden';
		document.getElementById(m_topselect).className = 'mnuitem out';
		var m_top2=document.getElementById("menu").clientHeight + m_subtop ;
	    //document.getElementById(id+"link").style.top = m_top2  + 5 + 'px';
	    
	    document.getElementById(id+"link").className = 'mnu';
		m_topselect=id;
		document.getElementById(m_select).className = 'mnuitem out';
	}else{
		document.getElementById(m_select).className = 'mnuitem out';
	}
	document.getElementById(id).className = 'mnuitem click';
	m_select=id;
}
 
Laatst bewerkt:
fijn dat je het laat staan.... ik probeer op het moment javascript te leren dus komt goed van pas!

groetjes, Anjo
 
Ik heb een naviagiemenu met de menu-items <a href="#"> Het is een bootstrap omgeving en op de een of andere manier worden mijn css styling opties voor deze a's niet gepakt
Zelf ben ik bezig met een website voor een pedicure. Daarvoor heb ik alvast de navbar in concept gemaakt, zie bijlagen. Alle kleurtjes kan je makkelijk aanpassen omdat in de css de id's worden gebruikt. Misschien heb je er wat aan.
 

Bijlagen

  • navbar1.zip
    1,4 KB · Weergaven: 30
Dag Bron

Daar heb ik zeker wat aan. Nu even niet want ik ben met de full text search bezig... wil nog niet echt lukken.
Ik had inmiddels met o.a. jouw eerdere tip die styling beter maar ik vind het zelf nog een beetje houtje-touwtje dus ik ga graag eens in je zip kijken.

groetjes, Anjo
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan