小编Hir*_*ral的帖子

伪类nth-of-type不适用于特定类

我的HTML第一次看起来很完美,但如小提琴所示,当点击按钮时,我想隐藏/显示一些.show元素.当我隐藏它们时,CSS就会被破坏.我不知道我错过了什么.

HTML:

<div>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
</div>
<input type="button" id="button" value="click" />
Run Code Online (Sandbox Code Playgroud)

CSS:

div .show:nth-of-type(-n+4) {
    margin-top:0;
}
div .show:nth-of-type(4n) {
    margin-right:0;
}
Run Code Online (Sandbox Code Playgroud)

JS:

$("#button").click(function () {
    $("span:eq(0),span:eq(2)").toggle().toggleClass("show");
});
Run Code Online (Sandbox Code Playgroud)

Jsfiddle在这里.

任何帮助,将不胜感激.

谢谢你的时间.

html css jquery css-selectors css3

3
推荐指数
1
解决办法
122
查看次数

循环动画功能

如何使用jquery循环动画功能?我有

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".b").click(function(){
                    var a=$(".abb");
                    a.animate({top:'100px',left:'400px'},"slow");
                    a.animate({top:'20px',left:'500px'},"slow");
                    a.animate({top:'500px',left:'100px'},"slow");
                    a.animate({top:'100px',left:'800px'},"slow");
                    a.animate({top:'200px',left:'100px'},"slow");
                    a.animate({top:'300px',left:'0px'},"slow");
                    a.animate({top:'600px',left:'300px'},"slow");
                    a.animate({top:'100px',left:'700px'},"slow");
                    a.animate({top:'300px',left:'100px'},"slow");
                });
            });
        </script>
    </head>
    <body>
        <button class="b"> click </button>
        <div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我希望上面的脚本能够持续工作.请协助

html javascript css jquery

3
推荐指数
1
解决办法
150
查看次数

从选择框中获取ID

我有多个选择框,在这样的形式:

<form action="foo" method="post" id="form">
    <select id="one">
        <option value="foo1"></option>
        <option value="foo2"></option>
        <option value="foo3"></option>
      </select>
      <select id="two">
          <option value="bar1"></option>
          <option value="bar2"></option>
          <option value="bar3"></option>
      </select>
      <select id="three">
          <option value="baz1"></option>
          <option value="baz2"></option>
          <option value="baz3"></option>
      </select>
</form>
Run Code Online (Sandbox Code Playgroud)

现在,如果这三个盒子中的任何一个改变了,我想知道它们中的哪一个.我试着像下面那样,但我只得到第一个盒子的id.我是否必须为每个选择编写它,或者有没有办法获取更改的选择框的ID?

$(document).ready(function() {
    $('#form').change(function() {    
        var strChosen = $('select').attr('id');    
        alert(strChosen);    
    });  
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery

2
推荐指数
1
解决办法
7587
查看次数

H1中SPAN的垂直对齐

我试图将span内部的文本对齐h1h1块的底部.

HTML

<h1>
    Left
    <span>Right and Bottom</span>
</h1>
Run Code Online (Sandbox Code Playgroud)

CSS

h1 {
    font-size: 2em;
}    
h1 span {
    float: right;
    font-size: 0.5em;
    vertical-align: bottom;
}
Run Code Online (Sandbox Code Playgroud)

这最终看起来像下面 - 任何人都可以建议我能做什么?

在此输入图像描述

非常感谢!

html css vertical-alignment

2
推荐指数
1
解决办法
4254
查看次数

如何使用javascript在jsp页面中动态添加内容?

MyServlet 转发到 Mypage.jsp 作为

request.getRequestDispatcher("/pages_homepage.jsp?value="+count).forward(request, response);
Run Code Online (Sandbox Code Playgroud)

其中 count 是生成的整数值

下面是我的 JSP 代码(Mypage.jsp),

<body  onload="getPage('<%request.getParameter("value");%>')">
    <div id="app"></div>
</body>
Run Code Online (Sandbox Code Playgroud)

下面是我的javascript代码,

function getPage(match){
    var arr = new Array();
    var ele = document.getElementById('app');
    for(var i=0;i<match;i++){
        var newdiv = document.createElement("label");
        newdiv.id = arr[i];
        newdiv.value="Page";
        ele.appendChild(newdiv);
    }
}
Run Code Online (Sandbox Code Playgroud)

我想要的是,我希望“页面”显示“匹配”次数。但是我无法通过上面的代码做到这一点。他们的 js 代码可能有问题。任何人都可以建议我进行任何更正吗?提前致谢。

javascript jquery jsp

2
推荐指数
1
解决办法
5570
查看次数

jQuery库无法从谷歌加载

我想从谷歌加载jQuery,但总是无法加载.我的源代码有什么问题?

错误

(X) GET file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js  
Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta content='IE=8' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="">
    <title></title> 
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>console.log($('body').height());</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

jquery

2
推荐指数
1
解决办法
146
查看次数

将href属性添加到bootstrap按钮

我正在努力使我的按钮在新标签中打开一个网址.

我可以使用window.location.href让它工作,但是url不会以新方式打开.

我正在使用jQuery和Javascript,代码本身就是一个更大的jQuery函数.

$('#code').click(function(){
    window.location.href = 'http://www.example.com'
});
Run Code Online (Sandbox Code Playgroud)

该按钮在页面加载时没有href属性.

<button id="code" type="submit" class="btn btn-success" style="width:400px;"><span class="glyphicon glyphicon-download"></span> Generate Code</button>
Run Code Online (Sandbox Code Playgroud)

我尝试过使用.attr和.prop虽然它也没有用.我对这些东西不熟悉所以我可能只是做错了什么.

我愿意为按钮添加href或使用.click函数或其他任何东西,我只需要打开一个新选项卡.

编辑::好的,更多解释.

在页面加载时,按钮onclick启动一个计时器,增加进度条.进度条完成后,我希望按钮打开一个链接.

html javascript jquery twitter-bootstrap

2
推荐指数
1
解决办法
2万
查看次数

hasClass()不起作用

只是想知道它为什么不提醒?

我确信我的变量也是正确的并且也存在于此上下文中.

if ($(".side-nav .nav").hasClass("features").toString()) {
    alert('test');
}
Run Code Online (Sandbox Code Playgroud)

为了测试它,我试图添加!在前面和一个不存在的类:

if (!$(".side-nav .nav").hasClass("whatever").toString()) {
    alert('test');
}
Run Code Online (Sandbox Code Playgroud)

它的工作原理.

html javascript css jquery

2
推荐指数
1
解决办法
579
查看次数

如何将文本和图像放在同一行?

如何将文本和图像放在同一行中,例如居中于图像?我尝试了一些方法,比如vertical-align:middle; 显示:内联; 但不工作......我的错误在哪里?

现在:

在此输入图像描述

我的css代码:

<style>
    .entryDetailX {
        float: right;
        background: #2B587A;
        -moz-border-radius-topleft: 8px;
        -webkit-border-top-left-radius: 8px;
        -moz-border-radius-bottomright: 8px;
        -webkit-border-bottom-right-radius: 8px;
        font-weight: bold;
        color: #FFF;
        padding: 6px;
    }
    .date {
        float: right;
        font-size: 9px;
        padding-top: 1px;
        background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
        padding-left: 20px;
        margin-right: 10px;
    }
    .nick {
        float: right;
        margin-right: 20px;
        color: #cc9900;
        background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
        padding-left: 20px;
    }
</style>
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="entryDetailX">
    <span class="date">18.01.2011 00:50:55</span>
    <a class="nick">phantasm</a>
</div>
Run Code Online (Sandbox Code Playgroud)

谢谢

html css html5 css3

1
推荐指数
1
解决办法
649
查看次数

chrome ProgressBar 不会改变颜色

我有进度条,但它不会在 chrome 中改变颜色。这是一个代码:

progress.xp::-webkit-progress-value:{ 
    background: #66CC33; 
}
Run Code Online (Sandbox Code Playgroud)

我查找了它,它似乎没问题,但它不起作用。

也许我不能在这种代码中使用类?或以其他方式?

html css

1
推荐指数
1
解决办法
3378
查看次数