当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Add active class and CSS to links <a> inside of buttons bootstrap

问题描述:

Hey guys I'm learning bootstrap/CSS while I design a website for a course.

Heroku app

Right now I have my header which is fine. There are some buttons, which have a <a> tag which covers all of them and that's all inside some divs and containers.

The inspector shows <a> tags. I made them as large as the buttons for click space, so I think I have to target these tags instead of the buttons.

I recently tried to completely overhaul the header and use the one from Bootstrap docs and did a jQuery script

$(function() {

$('button').click( function() {

$(this).addClass('active').siblings().removeClass('active');

});

});

This changed the style for white background (my choice for active) but it didn't stay. As soon as the redirect happened it was gone.

Should I use :visited and then remove it as I think :visited is a property which doesn't change when I click links.

Link to header file

Link to CSS file

Here's the newly added CSS which I think would work, the path of all the classes to get to the <a> tags.

The header attributes are not relevant but wouldn't want to leave anything out.

header{

text-align: center;

padding-bottom: 0em;

/* SHOULD THIS WORK? */

.navbar .container .btn-group button.active a{

background-color: white;

}

}

EDIT Header HTML -> The <a> Tags have width: 100%; height: 100%; so I always clicked them instead of the buttons. Didn't know a better way

<header class="navbar navbar-fixed-top navbar-inverse">

<div class="container">

<div class="btn-group">

<button type="button "class="btn btn-lg"><%= link_to current_user.name, current_user %></button>

<button type="button" class="btn btn-lg"><%= link_to "Log Out", root_path %></button>

<button type="button" class="btn btn-lg"><%= link_to "New Event", new_event_path %></button>

<button type="button" class="btn btn-lg"><%= link_to "All Events", events_path %></button>

I basically want something like Rift website

Oculus rift

Whether you are in Rift/Touch/Oculus Ready Pcs their formatting is different, they are bold and have a line underneath. I want that for my header but with white background instead.

网友答案:

Are you searching for

a:focus {
    background-color:white;
}

EDIT

If you want a white background all the time after clicked in the link, you need to create a cookie

$(function() {
    // Check cookie
    if (document.cookie.indexOf("clicked") >= 0) {
        // Change header
        $('header').css('background-color', 'white');
    } else {
        // Create trigger
        $('button').click(function(){
            $('header').css('background-color', 'white');
            // Create cookie
            document.cookie = 'clicked=1;';
        });
    }
});
网友答案:

I don't know why you nested a <a> inside a <button>, but if I understood your question, this is what you need:

$(function() {
    $('button').click( function() {
        var nav = $('.navbar.navbar-fixed-top.navbar-inverse');
        $(this).addClass('active');
        nav.css('background-color', '#fff');
    }); 
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: