Question

我正在做一个小HTML项目，我有一个主要的CSS代码，我坚持使用HTML，我（在你的代码中会看到）一个下拉按钮，它提供了几个选项，现在我想要的是当你点击其中一个选项时 - 1.它显示主下拉按钮中的选项（上面的文字[从“$ 4 $ 30 Aud”改为他们选择的任何内容]）

并且我想以某种方式将“添加到购物车”按钮更改为将重定向到其上方已选择的代码（上面提到的选项）

无论如何，谢谢你的帮助

CSS：

.button {
background-color: #ffffff;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 1px 2px;
cursor: pointer;
}
ul {display: inline;
     list-style-type:none;
      text-decoration: none;}
.button:hover{
background-color:  #595959;
}
    .header {
        text-align: center;
        background-color: #2ac9b7;
        color: black;
        position: fixed;
        width: 100%;
        padding: 20px;
    }


html, body{
width:100%;
height:100%; background-color: #62666d; margin: 0px;
}


    h1 {
        font-weight:bold;
        color: #000000;
        font-size:42px;
    }


    .main {
        font-family: arial;
        margin: 0px;
    }

    .Content {
        top:0;
        bottom:0
        left:0;
        right:0;
        margin-top: 160px
    }
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown             content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
img
{
display: block;
margin: 0 auto;
}

HTML

<html>

<head>
<link rel="stylesheet" href="Masters_baby.css">
<div class="Main">
<div class="header">
    <div class="links">

        <ul><a href="index.html"><button class="button">Home</button></a>    </ul>
        <ul><a href="Shop.html"><button class="button">Shop</button></a></ul>
        <ul><a href="Art.html"><button class="button">Art</button></a></ul>
        <ul><a href="AboutMe.html"><button class="button">About Me</button></a></ul>
        <ul><a href="Support.html"><button class="button">Support</button> </a></ul>
        <ul><a href="Production.html"><button class="button">Production</button></a></ul>
    </div>
</div>
</div>
</div>
<IMG STYLE="position:absolute; TOP:23px; LEFT:20px; WIDTH:130px; HEIGHT:50px" SRC="Logo.png">
</head>

<body>
<IMG STYLE="TOP:180px; LEFT:30px; WIDTH:50px; HEIGHT:50px" SRC="Flame.png">
</body>
</div>
</div>  
<div class="parallax"></div>
 <div style="height:4950px; width:80%; margin:0 auto; background-color:#98eacc; margin-top: 44px">



   <div class="Products" style="padding-top: 50px;">

    <div class="∞ Frosted Kumquat" style= "width: 100%; height:9.1%;       width:80%; margin:0 auto; background-color:#fff; ">
    <p style="font-size: 25px">∞ Frosted Kumquat</p>
    <IMG STYLE="WIDTH:35%; HEIGHT:63%" SRC="candle.jpg"     >
    <table style="width: 100%;">
    <tbody>
    <tr>
    <td style="width: 80%;">A fresh citrusy smell that fills the room, Its is fairly stong washing out any unwanted smells or just lifting the room. Best for someone who doesnt like the smell of overly sweet but likes the fresh smell of fruit.</td>
    <td>
    <div class="dropdown"><button class="dropbtn">$4-$30 AUD</button>
    <div class="dropdown-content"><a href="#">Melts $4.00</a> <a   href="#">Tea light(6) $5.00</a> <a href="#">Candle in a Tin $14.00</a> <a     href="#">Specitally Candles $15.00-$30.00</a> <a href="#">Boxed candle   $22.00</a> <a href="#">Triplet pack of candles $28.00</a></div>   
    </div>
    </td>
    </tr>
    <tr>
    <td></td>
    <td>
   <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"   method="post">

<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="kin@kinskards.com">

<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">

<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">

<!-- Display the payment button. -->
<input type="image" name="submit"
src="Add2Cart.png"
alt="Add to Cart" STYLE="WIDTH:70%; HEIGHT:20%">
<img alt="" width="1" height="1"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
    </td>
    </tr>
    </tbody>
    </table>    
    </div>
</div>
</div>
</div>
</html>

再次感谢您的帮助：）

Answer 1

首先，将所有内容放在<body>中。您的头部是您链接到样式表，加载脚本和设置元数据等的地方。您不希望头部中包含任何内容，例如标题。

您可以使用JavaScript实现这样的功能。我举个例子。

假设我们有以下HTML：

<select class="selector">
  <option value="10">10$</option>
  <option value="20" selected>20$</option>
  <option value="30">30$</option>
</select>

Selected plan: <span class="selected_plan">20$</span>

我们希望将{em> selected_plan 的span内容更改为select元素中选择的值。

首先我们需要创建一个新脚本（在body底部加载脚本）。

<script> // place your script here </script>

或

<script src="link_to_your_js_file.js"></script>

接下来我们需要选择我们的元素：

let selector = document.querySelector('.selector');
let selectedPlan = document.querySelector('.selected_plan');

然后我们会监听select更改的时间：

selector.addEventListener('change', function() {
    selectedPlan.innerHTML = selector.value + '$';
});

我为您创建了这个JSFiddle，因此您可以尝试这个特定示例：https://jsfiddle.net/dgyyyoh8/1/

修改

如果我是正确的，你也想改变属性。您可以使用setAttribute方法。

let link = document.querySelector('.element'); link.setAttribute('href', selected.value);

看看这个JSFiddle：https://jsfiddle.net/dgyyyoh8/2/

选择我们的元素

为选择器更改时创建一个事件

将链接的innerHTMl设置为“转到（选项的文本）”

将href属性设置为等于所选选项的值。

编辑：

有多种方法可以更改select元素的外观。

例如：https://codepen.io/ericrasch/pen/zjDBx

我建议您也看看CSS Framework Bootstrap。这个框架包含许多可以使用的类，可以将您的样式提升到一个新的水平。

HTML需要一个按钮来改变另一个按钮的输出

1 个答案: