Beiträge von Eva369

Eva369

Hello World!

Ich taste mich gerade an die Programmierung mit HTML/CSS, Javascript und PHP ran. Bin also noch Anfänger, habt deshalb erbarmen

Meine Problem:

Ich möchte mein Navigation beim anklicken eines Reiters aktiv setzen und das bei allen Reitern die jeweils angeklickt werden. Bekomme es aber nicht hin und verstehe nicht wo mein Fehler liegt. Ich hoffe Ihr könnt mir helfen.

Vielen Dank im voraus!

Hier mein Code:

HTML:

Code

<nav class="navbar navbar-inverse navbar-fixed-top" id="navi">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url('/') }}"><img src="/images/logo-bs.png" alt="Logo"/>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/') }}">Dashboard</a></li>
                <li><a href="{{ url('/offers') }}">Angebote</a></li>
                <li><a href="{{ url('/companies/create') }}">Angebot erstellen</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                @else
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                             <span class="">{!! Auth::user()->firstname . ' '.Auth::user()->lastname !!} </span>
                             <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="{{ url('/profile') }}">Mein Profil</a>
                            </li>
                            <li><a href="{{ url('/logout') }}">Logout</a></li>
                        </ul>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

Alles anzeigen

CSS:

CSS

.navbar-inverse{
    background-color: #E1E1E1;
    border: 0;
}




.container-fluid {
    padding-right: 10px;
    padding-left: 25px;
    margin-right: auto;
    margin-left: auto;
}




.container>
.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}




.navbar-inverse 
.navbar-collapse {
    background-color: #FAFAFA;
    border: 1px solid #E1E1E1;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 0px;
}




.navbar {
    height: 50px;
}




.navbar-brand {
    padding: 10px 15px;
}




.navbar-brand>img {
    width: 150px;
    height: 32px;
}




.navbar-inverse 
.navbar-nav>li>a {
    color: #000;
}




.navbar-inverse 
.navbar-nav>li>a:focus, 
.navbar-inverse 
.navbar-nav>li>a:hover {
    color: #000;
}




.navbar-inverse 
.navbar-nav>li>a:hover {
    color: #3774cd;
    background-color: #F7F7F7;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-top: -8px;
}




.navbar-nav>li>a {
    padding-top: 7px;
    padding-bottom: 15px;
    line-height: 20px;
}




.navbar-inverse 
.navbar-nav > 
.active > a {
    color: #3774cd;
    background-color: #F7F7F7;
    padding-top: 8px;
    margin-top: -8px;
}




.navbar-inverse 
.navbar-nav>
.active>a:focus { 
    color: #3774cd;
    background-color: #F7F7F7;
}




.navbar-inverse 
.navbar-nav>
.active>a:hover {
    color: #3774cd;
    background-color: #F7F7F7;
}








.navbar-inverse 
.navbar-nav>.open>a, 
.navbar-inverse 
.navbar-nav>.open>a:focus, 
.navbar-inverse 
.navbar-nav>.open>a:hover {
    color: #3774cd;
    background-color: #FAFAFA;
}




.navbar-inverse 
.navbar-nav > .open > a{
    color: #000;
    background-color: #E1E1E1;
}




.nav 
.navbar-nav 
.navbar-right {
    float: right!important;
    margin-right: 0px;
}








/*Dropdown und toggle*/








.navbar-inverse 
.navbar-toggle 
.icon-bar {
    background-color: #000;
}




.navbar-toggle {
    margin-top: 9px;
    margin-right: 28px;
    background-color: #F7F7F7;
    margin-bottom: 7px;
}




.navbar-inverse 
.navbar-toggle {
    border-color: #F7F7F7;
}




.navbar-inverse 
.navbar-toggle:hover {
    background-color: #F7F7F7;
    border-color: #333;
}




.navbar-inverse 
.navbar-toggle:focus {
    background-color: #F7F7F7;
}




.navbar-right 
.dropdown-menu {
    right: -1px;
    left: 5px;
}




.dropdown-menu {
    color: #000;
    background-color: #FAFAFA;
    border: 1px solid #E1E1E1;
    border-top-style: none;
    border-top-width: 0;
    min-width: 190px;
    -webkit-box-shadow: 0;
    box-shadow: none;
    padding: 4px 2px 4px 1px;
}




.navbar-nav>li>
.dropdown-menu {
    margin-top: 0;
    border-radius: 0 0 5px 5px;
}




.dropdown-menu>li>a {
    color: #000;
    padding: 10px 70px 10px 14px;
    font-weight: 300;
    font-size: 13px;
}




.dropdown-menu>li>a:hover {
    color: #3774cd;
    text-decoration: none;
    background-color: #F7F7F7;
}




.navbar-inverse 
.navbar-nav 
.open 
.dropdown-menu>li>a {
    color: #000;
}




.navbar-inverse 
.navbar-nav 
.open 
.dropdown-menu>li>a:hover {
    color: #3774cd;
    background-color: #F7F7F7;
}

Alles anzeigen

Javascript:

Code

$(document).ready(function(){




    //active state  
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');




        });
    });
});

Alles anzeigen