Question

我有一个带有标题标记的页面，其中包含四个按钮，例如Home About..但是使用焦点我在点击其中一个之后设法对边框等属性进行了一些更改，但我希望该按钮保持点击状态我点击了那个导航列表中没有的任何其他元素，我也可以默认选择home，（看.nav a:first-child），但是当我试图删除时又出现了另一个问题这些变化将重点放在他人身上。这个问题的解决方案是什么？这是css和相关标记：

CSS

.nav{
    width: 1200px;
    display: block;
    margin: 20px auto 0 auto;
    min-height:50px;
    max-height:50px; 
    background: royalblue;
    border: 2px solid royalblue;
    border-radius: 10px;
}
.nav a{
    text-decoration: none;
    color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 45px;
}
.nav a:first-child{
    border: 2px solid black;
    border-radius: 10px;
}
.nav a:focus{
    border: 2px solid black;
    border-radius: 10px;
}

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>YourWords</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link href="css/prostyle.css" rel="stylesheet">
    </head>
    <body>
        <header class="nav">
            <a href="#" >Home</a>
            <a href="#">Best</a>
            <a href="#">Authors</a>
            <a href="#">About</a>
        </header>
        <div class="wrap">
           ...
        </div>
        <footer class="footer">
           ...
        </footer>
        <script src="js/principal.js"></script>
    </body>
</html>

Answer 1

为您的导航项目ID设置，让您的生活更轻松。然后使用jQuery

var $lastClicked;

jQuery(document).ready(function($) {
    $(".nav a").each(function() {
        $(this).click({param: this.id}, setLastClicked);
    });
});

function setFocus(event) {
    event.preventDefault();
    $lastClicked = event.data.param;
}

$(".wrap").click(function() {
    $lastClicked.focus();
});

Answer 2

为了使这个有用，我使用以下CSS类和javascript解决了这个问题，同时推荐使用ID为@rory：

<强> HTML5

<header class="nav">
            <a href="#" id="home" onclick="app.hmclick()" class="modif">Home</a> 
            <a href="#" id="best" onclick="app.bsclick()" class="clearmodif">Best</a>
            <a href="#" id="authors" onclick="app.auclick()" class="clearmodif">Authors</a>
            <a href="#" id="about" onclick="app.abclick()" class="clearmodif">About</a>
        </header>

<强> CSS

.modif{
    border: 2px solid black;
    border-radius: 10px;
}
.clearmodif{
    border: 1px solid black;
    border-radius: 5px;
}

<强>的Javascript

var app={
curfocus:document.getElementById('home')
, setmodif:function(cls){
    this.curfocus.setAttribute('class',cls);
},

hmclick:function (){
    app.curfocus.setAttribute('class','clearmodif');
    app.curfocus=document.getElementById('home');
    this.setmodif('modif');
},
bsclick:function (){
    app.curfocus.setAttribute('class','clearmodif');
    app.curfocus=document.getElementById('best');
    this.setmodif('modif');
},
auclick:function (){
    app.curfocus.setAttribute('class','clearmodif');
    app.curfocus=document.getElementById('authors');
    this.setmodif('modif');
},
abclick:function (){
    app.curfocus.setAttribute('class','clearmodif');
    app.curfocus=document.getElementById('about');
    this.setmodif('modif');
}
};

谢谢大家。

如何保持焦点在CSS

2 个答案: