Изменение класса элемента с помощью onclick javascript

Мне нужно выяснить, как изменить класс элемента, когда OnClick запускается через javascript.Изменение класса элемента с помощью onclick javascript

В принципе, у меня есть следующий код:

index.html

<div class="bottom_section"> 
<div class="tab_section"> 
    <div class="tabing"> 
    <ul> 
    <li id="active_news"><a onclick="ContentSwitch('News');"> 
    <img src="includes/t_news.png" width="23" height="81" alt="t_news"> 
    </a></li> 
    <li id="active_events"><a onclick="ContentSwitch('Events');"> 
    <img src="includes/t_events.png" width="20" height="121" alt="t_events"> 
    </a></li> 
    <li id="active_updates"><a onclick="ContentSwitch('Updates');"> 
    <img src="includes/t_updates.png" width="19" height="141" alt="t_updates"> 
    </a></li> 
    </ul> 
    </div>

слева от коробки, который переключает содержимое, отображаемое в окне появляется этот список изображений.

У меня есть класс в моем CSS:

.bottom_section .tabing li.active{background: #1ca1e3 url(tab_li_active.gif) repeat-x 0 0;}

Это изменяет фон лепестка изображения на более темный оттенок, чтобы показать, что это «щелкнул». Итак, мне нужно добавить класс = "active" в тег < li>, если вкладка «выбрана».

У меня есть код javascript, который я нашел здесь в Stack Overflow, чтобы попробовать переключить класс, но он не работает.

function ContentSwitch(id) { 
if (id == "News") { 
    if (document.getElementById("news_content").style.display = "none") { 
    document.getElementById("news_content").style.display = "block"; 
    document.getElementById("active_news").className = document.getElementById("active_news").className.replace(/(?:^|\s)active(?!\S)/ , '') 

    // Hide other content 
    document.getElementById("events_content").style.display = "none"; 
    document.getElementById("updates_content").style.display = "none"; 
    } 
} 
if (id == "Events") { 
    if (document.getElementById("events_content").style.display = "none") { 
    document.getElementById("events_content").style.display = "block"; 
    document.getElementById("active_events").className = document.getElementById("active_events").className.replace(/(?:^|\s)active(?!\S)/ , '') 

    // Hide other content 
    document.getElementById("news_content").style.display = "none"; 
    document.getElementById("updates_content").style.display = "none"; 
    } 
} 
if (id == "Updates") { 
    if (document.getElementById("updates_content").style.display = "none") { 
    document.getElementById("updates_content").style.display = "block"; 
    document.getElementById("active_updates").className = document.getElementById("active_updates").className.replace(/(?:^|\s)active(?!\S)/ , '') 

    // Hide other content 
    document.getElementById("news_content").style.display = "none"; 
    document.getElementById("events_content").style.display = "none"; 
    } 
} 
}

Все работы onclick (контент успешно переключен), но изображения вкладок не переключаются. Если я добавлю вручную class = "active" в тег < li>, а затем нажмите на любую другую вкладку, активный будет удален и не вернется, поэтому javascript что-то делает.

Что мне не хватает?

Спасибо за любую помощь, которую вы можете предоставить.

источник

2012-05-30 Jguy

Er, почему бы это иметь ничего общего с этим вопросом? FYI, ни один из предыдущих «ответов», которые были даны по предыдущим вопросам, не разрешил вопросы, которые я выразил по этим вопросам, но безрезультатно, я не получил дальнейших «ответов» на эти вопросы, поэтому не могу их отмечать », ответил «если я на самом деле не получу их» ответил «не так ли? Благодарю. – Jguy

Вы возвращали результат регулярного выражения? – Sebas

@John Например, [ваш первый вопрос] (http://stackoverflow.com/questions/8829151/passing-values-to-a-function-from-within-a-function-in-python) имел пять разных пользователей прося разъяснений или предлагая улучшения, и вы даже не ответили на один из этих комментариев. – Phrogz

Ваш код выглядит довольно грязным. Во всяком случае, попробуйте следующее:

document.getElementById("active_news").className = '';

источник

2012-05-31 02:40:42

Ах, я не думал, что вы можете просто сделать это пустым, и это уберет его, вот где моя проблема. благодаря! – Jguy

Добро пожаловать ... –

вы используете дерево идентификаторов для идентичности дерева вкладок, active_news, active_events, active_updates в JavaScript он ссылается news_content и events_content, следует, что ссылки active_news, active_events?

так что код должен выглядеть

function ContentSwitch(id) { 
if (id == "News") { 
    if (document.getElementById("active_news").style.display = "none") { 
    document.getElementById("active_news").style.display = "block"; 
    document.getElementById("active_news").className = document.getElementById("active_news").className.replace(/(?:^|\s)active(?!\S)/ , '') 

    // Hide other content 
    document.getElementById("active_events").style.display = "none"; 
    document.getElementById("active_updates").style.display = "none"; 
    } 
} 
if (id == "Events") { 
    if (document.getElementById("active_events").style.display = "none") { 
    document.getElementById("active_events").style.display = "block"; 
    document.getElementById("active_events").className = document.getElementById("active_events").className.replace(/(?:^|\s)active(?!\S)/ , '') 

    // Hide other content 
    document.getElementById("active_updates").style.display = "none"; 
    document.getElementById("active_news").style.display = "none"; 
    } 
} 
if (id == "Updates") { 
    if (document.getElementById("active_updates").style.display = "none") { 
    document.getElementById("active_updates").style.display = "block"; 
    document.getElementById("active_updates").className = document.getElementById("active_updates").className.replace(/(?:^|\s)active(?!\S)/ , '') 

    // Hide other content 
    document.getElementById("active_events").style.display = "none"; 
    document.getElementById("active_news").style.display = "none"; 
    } 
} 
}

источник

2012-05-31 02:43:43

Исходный код работал нормально, так как фактический контент называется другим идентификатором. Я определенно планирую немного почистить его, если смогу ... но сейчас я просто хочу, чтобы все было сделано. Благодаря! – Jguy

Изменение класса элемента с помощью onclick javascript

ответ

Смежные вопросы