Ergebnis 1 bis 2 von 2

Thema: Navigation aktiv setzen

  1. #1
    HTML Newbie
    Registriert seit
    05.10.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navigation aktiv setzen

    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>
    CSS:

    Code:
    .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;
    }
    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');
    
    
            });
        });
    });
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.236
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Navigation aktiv setzen

    Hallo,

    Detailliert kann ich Dir leider nicht helfen, weil mir das von Dir verwendete "Template"-System unbekannt vorkommt.
    Generell sollte es mit der CSS-Property "active" möglich sein. Wenn das nicht ausreicht, stellt sich die Frage, ob man sich auf eine clientseitige Sprache wie JS oder serverseitige wie PHP verlasst.
    Ich persönlich tendiere dazu, das per PHP zu lösen und das Dokument gleich korrekt an den Browser zu senden.

Ähnliche Themen

  1. frage zu .aktiv
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 09.01.2013, 23:15
  2. Weiterleitung immer aktiv!!
    Von Nobody01 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.06.2008, 19:54
  3. Plone abgestürzt, Zope & ZMI aktiv
    Von help1 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 26.10.2007, 10:43
  4. Navigation nur ausblenden, wenn Link nicht aktiv
    Von amir im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 27.03.2007, 19:46
  5. aktiv oder nicht
    Von trecker im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 04.04.2006, 16:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •