Невозможно проверить XHTML без разрыва ссылок jQuery - PullRequest
0 голосов
/ 27 февраля 2010

моя веб-страница www.bodrum_dev.info (уберите символ подчеркивания из двух слов).

Я пытаюсь проверить свою страницу, но в разделе новостей (который изменяет заголовок статьи и изображение слева при наведении курсора на заголовки) выдается 30 ошибок.

Я знаю причину. Потому что у меня есть теги h1 h2 и div внутри тега. Таким образом, удаление тега parent и размещение тегов внутри h1 h2 и div, вероятно, решит проблему. Тем не менее, мой шаблон использует jquery, чтобы указать, что делать при наведении мыши, поэтому редактирование моего шаблона нарушает мою страницу. И это просто не ведет себя правильно. Как я могу проверить свою страницу, не нарушая эффекты наведения мыши? Связанные файлы ниже:

Ниже приведен мой шаблон:

<div class="newsWrap"><ul><li>
  <a href="[ARTICLELINK]">
    <h1 style="height: 90px;">
      <img border="0" src="/DesktopModules/DnnForge%20-%20NewsArticles/Headline.ashx?c=[CUSTOM:MANSET]&amp;fc=[CUSTOM:COLOR]" alt="[TITLE]" />
    </h1>
<h2 style="margin-top: 28px;margin-left: 5px;">
      [HASSUMMARY][SUMMARY][/HASSUMMARY][HASNOSUMMARY][DETAILS:150][/HASNOSUMMARY]
    </h2>
<div class="laImage">[IMAGETHUMB:200:265]</div>
<span>[TITLE]</span>
  </a>
</li></ul></div>

Ниже приведены мои записи jquery:

<script type="text/javascript">
jQuery().ready(function() {
jQuery(".newsWrap a:first").addClass('selected');
jQuery(".newsWrap a").mouseover(function(){
    jQuery('.newsWrap a.selected').removeClass('selected');
    jQuery(this).addClass('selected');
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function() {
        $('.koseContent p').each(function(){
            $(this).css('marginTop',(52-$(this).height())/2);
        }).show();
    });
    </script>
<script type="text/javascript" src="/js/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
// 
jQuery(document).ready(function(){
jQuery('table.RandomView').wrap("<div id='imageSwapper'></div>");
jQuery('table.RandomView').attr({align: "left"});
jQuery('table.RandomView').cycle({
    timeout:4000,
    speed:  1000,
    slideExpr: 'td div.sgWrap'
});
jQuery('table.RandomView tr').show();
});/* ]]> */
</script>

Ниже приводится мой css:

div.newsWrap {
    width:493px;
    height:410px;
    margin:0 10px;
    position:relative;


overflow:hidden;
    background-color:#fff;
}
div.newsWrap li{
    height:16px;
    margin-bottom:12px;
    background:

url(images/mandalina.gif) bottom left no-repeat scroll;
}
/* Element position */
div.newsWrap div.laImage {
    display:none;


position:absolute;
    top:130px;
    left:0;
    width:250px;      /* This and the overflow will crop the image */


overflow:hidden;
}
div.newsWrap h1 {
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:40px;


overflow:hidden;
    padding:5px 0 0;
    white-space:nowrap;
}
div.newsWrap h2 {
    display:none;
    position:absolute;


top:60px;
    width:493px;  /* Required for IE6 */
    left:0;
    height:50px;
    overflow:hidden;
    padding:0;
}
div.newsWrap ul{

padding-left:5px;
padding-right:5px;
margin-left:205px;
    margin-top:130px;
width:500px;
}


/* Font styling */
div.newsWrap li,div.newsWrap h2{
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height:13px;
    color:#000;
}
div.newsWrap h2{
    font-weight:bold;
    text-transform:uppercase;
}
div.newsWrap h1 {
    font-family:impact,Arial,sans-serif;
    font-size:30px;
    letter-spacing:-1px;
    line-height:40px;
    margin:0 auto;
    text-transform:uppercase;
    white-space:nowrap;
}
div.newsWrap li a{
    color:#000;
    padding-left:21px;
    font-weight:bold;


text-decoration:none;
    text-transform:uppercase;
}
div.newsWrap li a:link,div.newsWrap li a:visited {
    text-decoration:none;


color:#000;
}
/*
* This section reveals the strapline, summary and image for the hovered title
* The hover acts as a fallback, the real hover class is set by the selected class
*/
div.newsWrap li a:hover div,div.newsWrap li a.selected

div,div.newsWrap li a:hover h1,div.newsWrap li a.selected h1,div.newsWrap li a:hover   h2,div.newsWrap li a.selected h2 {


display:block;
}
div.newsWrap li a:hover span {
    text-decoration:underline;
}

Ответы [ 2 ]

2 голосов
/ 27 февраля 2010

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

jQuery(".newsWrap a").mouseover(function()

Примените указатель мыши к другому элементу, например:

jQuery(".newsWrap h1").mouseover(function()

Или, если вы предпочитаете:

jQuery(".newsWrap h1 a").mouseover(function()

Просто не забудьте проверить, что все ссылки внутри этих функций имеют смысл (или относятся к правильным элементам).

ИЗМЕНЕННЫЙ КОД:

Влияет на H1 и H2 по запросу.

Оригинал:

jQuery(".newsWrap a").mouseover(function(){
    jQuery('.newsWrap a.selected').removeClass('selected');
    jQuery(this).addClass('selected');
});

Изменено:

$(".newsWrap h1").mouseover(function() {
    $(".newsWrap h1.selected").removeClass("selected");
    $(this).addClass("selected");
});
$(".newsWrap h2").mouseover(function() {
    $(".newsWrap h2.selected").removeClass("selected");
    $(this).addClass("selected");
});

Первая функция наведения мыши влияет на все элементы H1 внутри класса div .newsWrap, а вторая функция наведения мыши влияет на все элементы H2 внутри класса div .newsWrap.

Существуют более элегантные способы достижения того, что вы делаете.после, но я оставил это так, чтобы все было просто.Если вы хотите повлиять на все теги H1 и H2 на странице (а не только на теги внутри класса div .newsWrap, просто удалите слово .newsWrap везде, где оно встречается в приведенном выше примере.

Надеюсь, это поможет.

2 голосов
/ 27 февраля 2010

Вы действительно должны исправить страницу, а затем исправить код jQuery. Я бы поместил теги <a> внутри тегов заголовка, вокруг миниатюрного изображения и в этом <span> (или что-то еще; это зависит от того, что вы хотите, чтобы на него нажимали). Затем измените код jQuery, чтобы он применял стиль «selected» к div «newsWrap» в целом, а также измените CSS так, чтобы он выглядел так, как вы хотите.

Если вы попытаетесь использовать плохой HTML, вы обнаружите, что браузеры делают странные вещи.

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