Изменение класса CSS с помощью Javascript - PullRequest
Новая
       0

Изменение класса CSS с помощью Javascript

1 голос
/ 05 июня 2010

Есть ли лучший способ, чем реализация, которую я имею сейчас? Я обеспокоен тем, что способ, которым я это сделал, немного хакерский, и мне интересно, есть ли более элегантное решение.

Я хочу изменить «выбранный» элемент на странице, применив к нему класс CSS, и удалить тот, который выбран в данный момент. У меня есть код для изменения класса элемента: 

function changeClass(element) {
    document.getElementById("nav").getElementsByClassName("selected")[0].className = "";
    element.className = "selected";
}

И соответствующие элементы: 

<div id="nav">
    <ul>
        <li><a href="#" onclick="changeClass(this)" class="selected">Main</a></li>
        <li><a href="#" onclick="changeClass(this)">Downloads</a></li>
        <li><a href="#" onclick="changeClass(this)">News</a></li>
        <li><a href="#" onclick="changeClass(this)">Forums</a></li>
        <li><a href="#" onclick="changeClass(this)">Proposals</a></li>
    </ul>
</div>

Опять же, это выглядит немного глупо. Есть ли лучший способ выполнить то, что я пытаюсь сделать?

Ответы [ 5 ]

5 голосов
/ 05 июня 2010

Вот как это сделать с JQuery: 

$(document).ready( function()
{
    $("a").click( function()
    {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    } );
});

Это очищает существующий "выбранный" класс и добавляет его к тому, который только что щелкнули.

3 голосов
/ 05 июня 2010

Использование getElementByClassName не слишком рекомендуется, потому что в настоящее время есть браузер, который не полностью поддерживает эту функцию (в основном IE). Вероятно, это то, что будет работать лучше на всех браузерах: 

<html>
<head>

<script type="text/javascript">
var previousElement = null;
function changeClass (newElement) {
     if (previousElement != null) {
          previousElement.className = "";
     }

     newElement.className = "selected";
     previousElement = newElement;
}

// just add a call to this function on the load of the page
function onload() {
     lis = document.getElementById("nav").getElementsByTagName("a");
     for (var i=0; i<lis.length; i++) {
          if (lis[i].className == "selected")
            previousElement = lis[i];
     }
}
</script>
<style type="text/css">
.selected {
    background: #0ee;
}
</style>
</head>
<body onload="onload()">
<div id="nav">
    <ul>
        <li><a href="#" onclick="changeClass(this)" class="selected">Main</a></li>
        <li><a href="#" onclick="changeClass(this)">Downloads</a></li>
        <li><a href="#" onclick="changeClass(this)">News</a></li>
        <li><a href="#" onclick="changeClass(this)">Forums</a></li>
        <li><a href="#" onclick="changeClass(this)">Proposals</a></li>
    </ul>
</div>
</body>
</html>
0 голосов
/ 05 июня 2010 
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Untitled Document</title>

<style type="text/css">
li{margin:1ex 1em}
ul.selectable a{color:blue;text-decoration:underline;font-size:2em}
ul.selectable a.selected{color:red;border:red dotted 1px}
</style>
<script type="text/javascript">
// It is easier to fake a lightweight forEach than 
//an  getElementsByClassName function


Array.prototype.forAll= function(fun){
    var L= this.length, tem;
    if(typeof fun== 'function'){
        while(L){
            fun(this[--L]);
        }
    }
}

// You could have just one handler, listening to the div or ul
// and running the function on the target it it is a hyperlink.

onload= function(){
    var pa= document.getElementById("nav"),
    collection= pa.getElementsByTagName('a');

    pa.onclick= function(e){
        e= window.event? event.srcElement: e.target;
        if(e.tagName== 'A'){
            [].forAll.call(collection,function(itm){
                itm.className= '';
            });
            e.className= "selected";
            return e.focus();
        }
        return true;
    }
}

</script>
</head>
<body>

<div id= "nav"> 
<ul class= "selectable"> 
<li> <a href= "#" class= "selected"> Main</a> </li> 
<li> <a href= "#"> Downloads</a> </li> 
<li> <a href= "#"> News</a> </li> 
<li> <a href= "#"> Forums</a> </li> 
<li> <a href= "#"> Proposals</a> </li> 
</ul> 
</div>

</body>
</html>
0 голосов
/ 05 июня 2010

Нет ничего плохого в том, что у вас есть.

Вместо getElementsByClassName, который не поддерживается IE, рассмотрите возможность использования getElementsByTagName, чтобы получить все теги <a> в виде массива, затем итерируя по этому массиву, устанавливая className в значение "" для каждого.

Библиотека Javascript, такая как jQuery или Prototype, действительно предоставляет множество функций, специально предназначенных для такого рода работы. Но, если вы делаете немного больше Javascript, чем это, они полностью излишни.

Наконец, если ваши <a> предназначены для резервного копирования в случае, если Javascript отключен, вы, вероятно, хотите, чтобы ваши обработчики onclick возвращали false; это предотвращает переход по ссылке. (В вашем случае "#".)

0 голосов
/ 05 июня 2010

Я рекомендую вам использовать библиотеку JavaScript для этого. Например, с помощью jQuery вы можете сделать что-то вроде этого: 

$("#nav .selected").removeClass("selected");

Это удалит "выбранный" класс из всех дочерних элементов #nav, у которых есть класс "выбранный".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...